0

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

解决办法是什么？在此处输入图像描述

4

3 回答 3

1

为什么首先要使用float较小div的 s？在它们上使用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;
}

希望有帮助！

于 2012-09-08T15:43:30.060 回答
1

您应该在这里使用表格，但如果不是这种情况，请尝试我制作的这个小提琴。

HTML

<!DOCTYPE html>

演示​</p>

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;
    }
    ​
于 2012-09-08T15:49:45.403 回答
0

让它简单并使用

div.big {
width:100%;
}
div.small {
    width:33.33%
}
于 2016-08-26T12:15:22.357 回答