将内容插入网格框

Question

我做出了响应式网格布局。 This is it's pen。我想将内容添加到布局中的每个li元素。我自己制作了一个内容，它看起来像下面的代码。但是，将此代码插入li元素中会弄乱布局。任何想法如何将下面的代码插入li元素？

.wrapper-1 { 
 
    padding:10px 10px; 
 
} 
 

 
.wrapper-3 { 
 
    display:inline; 
 
    width: 400px; 
 
    height: 100px; 
 
    padding:10px 10px; 
 
} 
 

 
.left-side { 
 
    float: left; 
 
    width: 60px; 
 
    height: 100px; 
 
    margin-right: 15px; 
 
} 
 

 
.left-side > .image { 
 
    background: url(http://placehold.it/100x100) no-repeat center center; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 10px; 
 
    margin-bottom:10px; 
 
} 
 

 
.right-side { 
 
    float: left; 
 
    width: 285px; 
 
    height: 100px; 
 
} 
 

 
.right-side > .title { 
 
    margin: 0; 
 
}

<div class="wrapper-1"> 
 
     <div class="left-side"> 
 
     <div class="image"></div> 
 
     <img src="" alt=""> 
 
     </div> 
 
     
 
     <div class="right-side"> 
 
     <h3 class="title">HEY NOW</h3> 
 
     <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
    </div>

Answer 1

的padding-top值#Grid li和margin-right: 15px在.left-side被打破了响应。这里是解决方案：

div, ul, li{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
/* -- FLUID GRID STYLES -- */ 
 

 
#Grid{ 
 
    margin-bottom: 40px; 
 
    text-align: justify; 
 
    padding:35px; 
 
} 
 

 
#Grid li{ 
 
    display: inline-block; 
 
    background: #eee; 
 
    width: 31%; 
 
    margin-bottom: 2.5%; 
 
} 
 

 
#Grid:after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
    
 
} 
 

 

 
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */ 
 

 
/* 3 COL */ 
 

 
@media (max-width: 900px){ 
 
    #Grid li{ 
 
    width: 48%; 
 
    margin-bottom: 3%; 
 
    } 
 
} 
 

 
/* 2 COL */ 
 

 
@media (max-width: 800px){ 
 
    #Grid li{ 
 
    width: 48%; 
 
    margin-bottom: 4%; 
 
    } 
 
} 
 

 
/* SINGLE COL */ 
 

 
@media (max-width: 550px){ 
 
    #Grid li{ 
 
    width: 100%; 
 
    margin-bottom: 5%; 
 
    } 
 
} 
 

 
.element-container { 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    background-color: red; 
 
\t max-width:1140px; 
 
} 
 

 

 
.wrapper-1 { 
 
    padding:10px 10px; 
 
} 
 

 
.wrapper-3 { 
 
    display:inline; 
 
    width: 96%; 
 
    height: 100px; 
 
    padding:10px 2%; 
 
} 
 

 
.left-side { 
 
    float: left; 
 
    width: 25%; 
 
    height: 100px; 
 
} 
 

 
.left-side > .image { 
 
    background: url(http://placehold.it/100x100) no-repeat center center; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 10px; 
 
    margin-bottom:10px; 
 
} 
 

 
.right-side { 
 
    float: left; 
 
    width: 75%; 
 
    height: 100px; 
 
} 
 

 
.right-side > .title { 
 
    margin: 0; 
 
    font-size: 1em; 
 
} 
 

 
.right-side > .text { 
 
    margin: 0; 
 
    font-size: 0.5em; 
 
}

<div class="element-container"> 
 
    <ul id="Grid"> 
 
    <li> 
 
     <div class="wrapper-1"> 
 
     <div class="left-side"> 
 
      <div class="image"></div> 
 
      <img src="" alt=""> 
 
     </div> 
 

 
     <div class="right-side"> 
 
      <h3 class="title">HEY NOW</h3> 
 
      <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="wrapper-1"> 
 
     <div class="left-side"> 
 
      <div class="image"></div> 
 
      <img src="" alt=""> 
 
     </div> 
 

 
     <div class="right-side"> 
 
      <h3 class="title">HEY NOW</h3> 
 
      <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="wrapper-1"> 
 
     <div class="left-side"> 
 
      <div class="image"></div> 
 
      <img src="" alt=""> 
 
     </div> 
 

 
     <div class="right-side"> 
 
      <h3 class="title">HEY NOW</h3> 
 
      <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="wrapper-1"> 
 
     <div class="left-side"> 
 
      <div class="image"></div> 
 
      <img src="" alt=""> 
 
     </div> 
 

 
     <div class="right-side"> 
 
      <h3 class="title">HEY NOW</h3> 
 
      <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div class="wrapper-1"> 
 
     <div class="left-side"> 
 
      <div class="image"></div> 
 
      <img src="" alt=""> 
 
     </div> 
 

 
     <div class="right-side"> 
 
      <h3 class="title">HEY NOW</h3> 
 
      <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 

 
    <li class="placeholder"> 
 
     <div class="wrapper-1"> 
 
     <div class="left-side"> 
 
      <div class="image"></div> 
 
      <img src="" alt=""> 
 
     </div> 
 

 
     <div class="right-side"> 
 
      <h3 class="title">HEY NOW</h3> 
 
      <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

顺便说一句，我不明白为什么要在#Grid使用font-size: 0.1px;。我已经删除它，并添加以下两行以使文本响应。

.right-side > .title { 
    font-size: 1em; 
} 

.right-side > .text { 
    font-size: 0.5em; 
}