html中怎样水平左浮动,html – 中心x浮动量：左边divs水平

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,因为这将集中容器中的每一行.