Div实际自动宽度

Question

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

解决方案是什么？

​

Answer 1

为什么一开始就要float你的小div呢？在它们上使用display: inline-block;可以在居中时提供更多的控制，并使您能够通过执行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;
}

希望这能有所帮助！

Answer 2

您应该在这里使用表，但如果不是这样，请尝试我制作的这个fiddle。

HTML

<!DOCTYPE html>

Demo                                                                                      ​

CSS

.container{
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
}
.item{
        height: 10px;
        margin-top: 10px;
        margin-right: 2%;
        width: 32%;
        float: left;
        background-color: #dfdfdf;
    }
    .mr0{
        margin-right: 0;
    }
    .clear{
        clear: both;
    }
    ​

Answer 3

让它变得简单并使用它

div.big {
width:100%;
}
div.small {
    width:33.33%
}