javascript - Div 真正的自动宽度

Question

我有一个 div，它基本上是 float: left 较小 div 的网格。我希望整个网格具有自动宽度，并且相对于其容器居中。 display: inline-block to grid + text-align: center to container 没有产生预期的结果。似乎一旦用几个 div 填充网格以创建新行，即使较小的 div 不完全适合该行并且右侧仍有一些空白，网格的宽度也会最大化到容器的宽度。

解决方案是什么？

Answer 1

为什么首先要 float 您较小的div？在它们上使用 display: inline-block; 可以让您在居中时有更多的控制权，并使您能够通过 使容器 width “自动” display: inline-block; 也是。这是一个小的工作演示:little link .

这是基本的大纲，HTML:

<div class = "container">
    <div class = "floatcontainer">
        <img src = "" alt = "" class = "floatimg"/>
        <img src = "" alt = "" class = "floatimg"/>
        <img src = "" alt = "" class = "floatimg"/>
        <br/>
        <img src = "" alt = "" class = "floatimg"/>
        <img src = "" alt = "" class = "floatimg"/>
        <img src = "" alt = "" class = "floatimg"/>
    </div>
</div>

CSS:

.container {
    width: 100%;
    text-align: center;
}
.floatimg {
    width: 100px;
    display: inline-block;
    margin: 15px;
}
.floatcontainer {
    display: inline-block; /*makes the div's width only as large as needed*/
    text-align: center;
}

希望对您有所帮助!