Question

我现在的设置是这样的

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>

.container {
    width: 100%;
    border: 1px solid black;
    display: inline-block;
}
.child {
    border: 1px solid grey;
    display: inline-block;
}

http://jsfiddle.net/T2478/

我希望所有带有“child”类的div能够用“容器”类填充整个div的宽度？

可能是一个非常简单的解决方案，我是html和css的新手

我怎样才能这样做，无论宽容“容器”是什么，孩子都会均匀分布？

谢谢！

Answer 1

我知道这个答案已经很老了，但我现在可以解决这个问题并使用CSS'calc函数。看看我为您制作的更新代码。

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>

.container {
    width: 100%;
    border: 1px solid black;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}
.child {
    border: 1px solid grey;
    width: calc( 100% / 4); /* 4 is how many .child divs you have */
}

jsfiddle

Answer 2

使用flex实际上是一个好主意。在这里，您去了：

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
  border: 1px solid black;
}

.child {
    flex: 1 1 auto;
    
    border: 1px solid grey;
}

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>

您可以使用justify-content值和flex值进行额外的自定义。
无需在不应该使用的表上弄乱。

P.S。您可以使用这个众所周知的article轻松进入Flex。

Answer 3

只需从子类中删除display: inline-block;属性。

CSS Divs已经具备了填充整个宽度的“能力”。

多个div扩展到填充容器的宽度？

3 个答案: