Are you looking for something like this?在容器上设置自动边距将使其水平居中.从那里,您可以浮动或内联您的块,以便以您说话的方式显示它们.看看CSS和HTML:
...
这个HTML就像在语义上一样简单.理想情况下,我通常会将此作为无序列表,但由于您的标题提到了标题中的div,我走向了那个方向.
div.container div{
border: solid 2px black;
min-height: 100px;
width: 100px;
display: inline-block;
background-color: white;
vertical-align: top;
margin: 10px;
}
div.container div.variant{
width: 200px;
}
div.container{
margin: auto;
max-width: 620px;
background-color: #ecefec;
padding: 10px;
font-size: 0;
}
这里发生了什么
我们通过属性显示内联块元素:inline-block;因此,我们需要制定一些额外的规则,以便在它们具有不同高度的情况下正确显示它们(这些将自动清除一行,与浮动元素不同).
内联元素上的属性vertical-align:top确保它的排列方式使元素的顶部边框与其兄弟元素的顶部边框齐平.
属性font-size:0确保在块元素之间的间距计算中不考虑标记空白(否则包括一个div标签的关闭与另一个div标签的开口之间的每个空间).
这应该实现你想要实现的目标.
UPDATE
在查看您的评论以回答另一个问题后,我们需要添加text-align:center;到容器div的CSS,因为这将集中容器中的每一行.