这是一个非常简单的问题,但是我无法解决一个简单的问题。我需要连续居中3个正方形,但是我不知道正方形的总数(而简单的解决方案是使用text-align: center
),但是我不想将最后一个元素居中。长话短说,如何float: left
在主容器内创建效果+将所有元素居中?
JSfiddle在这里。
HTML:
<div class="row b">
<div class="col-lg-6 col-md-6 col-sm-12 col-lg-offset-3 col-md-offset-3">
<div class="row maxW b">
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
</div>
</div>
</div>
CSS:
.postContainer {
width: 230px;
height: 230px;
border: 1px solid lightblue;
display: inline-block;
}
.maxW {
max-width: 900px;
}
.ce {
text-align: center;
}
.b{
border:1px solid black;
}
预期结果:
这些正方形应该具有响应性,每行最大正方形为3。如果使用float: left
,我几乎可以得到所需的东西,但是正方形被向左拉,而不是在主容器内居中。如果使用text-align: center
,则正方形在主容器中居中,但我不希望最后一个正方形居中,则它们必须保持向左浮动。
我建议使用flexbox。在CSS中,这是一个相当新的概念,但是在所有现代浏览器中都有很好的支持。我个人在生产中使用它。
标记将简化为:
<div class="posts">
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
</div>
并且容器将具有CSS:
.posts {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin: 0 auto;
}
Display: flex
告诉浏览器它是一个flexbox,flex-flow
说它应该是行,当行满时会自动换行,并且内容应该用左对齐flex-start
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句