并排显示 css 中的新闻

Question

我使用 css 和 html 进行了以下设计。我需要并排显示 'post' 个 div。 display:block; 不起作用，我已经尝试了很多方法。

这是我的代码：

#content {
  float: left;
  display: inline-block;
  position: relative;
  width: 45%;
  margin: 0;
}

#dummy {
  padding-top: 29%;
}

#content .post {
  text-align: left;
  float: left;
  padding: 20px 15px 0 35px;
  border: 1px solid #eee;
  margin: 2px;
}

#content .post h2 {
  font-family: Georgia;
  font-size: 1.5em;
  margin-bottom: 15px;
}

#content .post h2 a {
  color: #252525;
}

#content .post .date {
  font-size: 0.9em;
  font-family: Georgia;
  color: #808080;
  margin-bottom: 15px;
}

#content .post .continue {
  color: #ffffff;
  background-color: #DC1000;
  padding: 5px 10px;
  float: left;
  font-family: Georgia;
  font-weight: bold;
  margin-bottom: 25px;
}

#content .post p {
  margin-bottom: 10px;
  line-height: 1.4em;
}

#content .post .thumb div {
  width: 50%;
  height: auto;
  overflow: hidden;
}

#content .post .thumb img {
  height: auto;
  width: 250px;
  margin: 2px;
}

<div id="content">

  <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <div id="dummy">
  </div>
  <!-- end post -->
  <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /> <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <!-- end post -->
</div>

Answer 1

通过改变 #content 的 CSS 来简单地使用 flex :

#content {
  display:flex;
  margin: 0;
}

这是完整的代码（我还删除了一个无用的浮点数属性）

/** BEGIN content **/

#content {
  display:flex;
  margin: 0;
}


#content .post {
  text-align: left;
  padding: 20px 15px 0 35px;
  border: 1px solid #eee;
  margin: 2px;
}

#content .post h2 {
  font-family: Georgia;
  font-size: 1.5em;
  margin-bottom: 15px;
}

#content .post h2 a {
  color: #252525;
}

#content .post .date {
  font-size: 0.9em;
  font-family: Georgia;
  color: #808080;
  margin-bottom: 15px;
}

#content .post .continue {
  color: #ffffff;
  background-color: #DC1000;
  padding: 5px 10px;
  float: left;
  font-family: Georgia;
  font-weight: bold;
  margin-bottom: 25px;
}

#content .post p {
  margin-bottom: 10px;
  line-height: 1.4em;
}

#content .post .thumb div {
  width: 50%;
  height: auto;
  overflow: hidden;
}

#content .post .thumb img {
  height: auto;
  width: 250px;
  margin: 2px;
}

<div id="content">

  <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <div id="dummy">
  </div>
  <!-- end post -->
  <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /> <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <!-- end post -->
</div>

也可以通过控制子元素的flex属性来控制同一行元素的个数。这是一个示例，每行有 4 个元素和 2 个元素。

这是您必须添加的代码：

#content .post {
  flex:0 0 50%; /* this mean take half the space of the row*/
}

您还需要注意溢出，这就是我添加此代码的原因：

* {
      box-sizing:border-box;
  }

阅读更多关于 box-sizing

您还需要像这样设置 flex-wrap 属性 :

#content {
  display:flex;
  margin: 0;
  flex-wrap: wrap; /* this allow line break */
}

/** BEGIN content **/
body,html {
padding:0;
margin:0;
}

* {
  box-sizing:border-box;
}
#content {
  display:flex;
  margin: 0;
  flex-wrap: wrap;
}


#content .post {
  text-align: left;
  flex:0 0 50%;
  padding: 20px 15px 0 35px;
  border: 1px solid #eee;

}

#content .post h2 {
  font-family: Georgia;
  font-size: 1.5em;
  margin-bottom: 15px;
}

#content .post h2 a {
  color: #252525;
}

#content .post .date {
  font-size: 0.9em;
  font-family: Georgia;
  color: #808080;
  margin-bottom: 15px;
}

#content .post .continue {
  color: #ffffff;
  background-color: #DC1000;
  padding: 5px 10px;
  float: left;
  font-family: Georgia;
  font-weight: bold;
  margin-bottom: 25px;
}

#content .post p {
  margin-bottom: 10px;
  line-height: 1.4em;
}

#content .post .thumb div {
  width: 50%;
  height: auto;
  overflow: hidden;
}

#content .post .thumb img {
  height: auto;
  width: 250px;
  margin: 2px;
}

<div id="content">

  <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <!-- end post -->
    <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <!-- end post -->
    <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <!-- end post -->
  <!-- begin post -->
  <div class="post">
    <h2><a href="#">A crut tellus et Gravida Ipsum</a></h2>

    <div class="thumb"><img height="100" src="fdb.jpg" alt="" />
      <img height="100" src="fdb.jpg" alt="" /> <img height="100" src="fdb.jpg" alt="" /></div>

    <p class="date">Posted on January 7, 2008 by admin</p>
    <p> Viverra integer enim, sed dolor. Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. cum condimentum mattis dui fusce ut, vel convallis suspendisse suspendisse sed in. Libero blandit curae at magna ut, id mauris suspendisse
      ligula neque integer non.</p>
    <a class="continue" href="#">Continue Reading</a> </div>
  <!-- end post -->
</div>

并排显示 css 中的新闻

displaying news in css next to each other

html

css

css-float