11

我现在的设置是这样的

<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/

我希望所有具有“子”类的 div 将自己展开以填充具有“容器”类的 div 的整个宽度？

可能是一个非常简单的解决方案，我对 html 和 css 还很陌生

我怎样才能做到这一点，以便无论孩子们的“容器”是什么宽度，都会均匀分布？

谢谢！

4

5 回答 5

23

您将需要模拟表格布局行为，如本答案所示。

这不涉及使用实际<table>元素和子元素！这涉及使用display属性的某些值，即table和table-cell来模拟表格的布局行为。您不想将实际的表格标记用于纯布局，因为这在语义上是不正确的并且不受欢迎。如果您的内容是属于表格的实际表格数据，那么使用实际的<table>. 我将在这里介绍非表格方式，因为这可能是您想要的。

您的div.container元素将需要该display: table;属性才能使其表现得像<table>. 您还需要table-layout具有值的规则fixed，以使您的所有子元素均匀分布。然后，您的div.child元素将需要display: table-cell;使它们像表格单元格一样工作。浏览器现在将自动为您的子元素计算均匀分布的布局。请注意，您不再需要/想要width对子元素的规则，因为浏览器会计算它。容器元素需要某种宽度，否则表格将简单地折叠到仅与其内容一样大。请注意，如果内容宽度大于计算的均匀间隔尺寸，则内容也可能溢出子元素。

最终代码如下，这里有一个fiddle。

HTML：

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

CSS：

.container {
    width: 100%;
    border: 1px solid black;
    display: table;
    table-layout: fixed;
}
.child {
    border: 1px solid grey;
    display: table-cell;
}

另外，关于display: inline-block;. 它将呈现内联块元素之间的所有空白（您可以将其视为原始小提琴中子元素之间的间距）。这是正常的并遵循规范，但有时是不希望的。您可以在此处阅读有关绕过它的方法。

于 2013-11-12T05:44:59.203 回答
4

的使用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为额外的定制提供价值。
并且无需在不应该摆弄的桌子上乱七八糟。

PS 你可以通过这篇著名的文章轻松地深入了解 flex 。

于 2018-10-30T15:36:21.697 回答
2

我知道这个答案已经很老了，但我现在可以解决这样的问题并使用 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

于 2017-03-08T08:26:40.263 回答
0

尝试这个

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

小提琴

于 2013-11-12T05:24:00.383 回答
-1

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

CSS Div 已经有“能力”来填满整个宽度。

于 2013-11-12T05:33:04.017 回答