グリッドボックスにコンテンツを挿入

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

.left-sideで#Grid liとmargin-right: 15pxでpadding-top値が応答を壊しています。ここでは解決策がある：ところで

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;を使用している理由を、私は理解できませんでした。私はそれを削除し、次の2行を追加してテキストを反応させました。

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

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