将内容插入网格框

Question

我做了一个响应性的网格布局。这是笔。我想向布局中的每个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

#Grid li中的#Grid li值和.left-side中的margin-right: 15px值正在破坏响应。以下是解决办法：

​

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;
	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中使用#Grid。我已经删除了它，并增加了以下两行，以使文本响应。

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

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