我使用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>
答案 0 :(得分：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>