Question

我有一个100％宽度的容器（在另一个父div中），里面最多包含6个流体宽度的物品，每个容器宽度的1/6（16.66％）

当有6个子div时，这显然可以正常工作，但如果少于那么我希望它们保持相同的宽度（完整100％父宽度的1/6），但要在容器内水平居中。

如果我在容器上使用边距或填充（或在容器内创建包装），则会影响项目的百分比宽度（因为它会更改百分比所涉及的总宽度）。

我显然可以使用绝对定位和JS来解决这个问题，但是如果可能的话，我希望能够通过CSS来做到这一点。

有没有人能说明在这种情况下应该采取什么方法？

我创建了一个简单的jsfiddle来说明我的意思：http://jsfiddle.net/9L4Qd/

来自jsfiddle的代码：

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

#container div {
    width: 16.66%;
    float: left;
}

<div id="container">
 <div style="background-color: #ffcc00;">
    Option 1
 </div>
 <div style="background-color: #cccc00;">
    Option 2
 </div>
 <div style="background-color: #ffcc00;">
    Option 3
 </div>
 <div style="background-color: #cccc00;">
    Option 4
 </div>
 <div style="background-color: #ffcc00;">
    Option 5
 </div>
</div>

非常感谢，

戴夫

Answer 1

使用display:inline-block

而不是花车

JSfiddle with 6 divs

Jsfiddle with 5 divs

<强> CSS

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    background-color: #000000;
    text-align: center;
    font-size: 0;
}

#container div {
    width: 16.66%;
    display: inline-block;
    font-size:1rem
}

如何在100％宽度的容器中居中未知数量的流体div？

1 个答案: