让n个子div的宽度基于父级的宽度[关闭]答案

【问题标题】：Have n child div's have equal width based on parent's width [closed]让n个子div的宽度基于父级的宽度[关闭]
【发布时间】：2015-05-27 03:31:10
【问题描述】：

我已经看到了几个关于此的问题，但我没有看到一个简明的答案。我想知道是否可以在父元素下有 n 个元素，其中所有这些元素的宽度都相等，而与文本大小无关。例如，如果父元素是 1000px，我希望子元素自动采用 1000/n 的宽度。这可以用 CSS 实现吗？

【问题讨论】：

使用flex 概念或display: table-cell
这个问题很模糊。您是在谈论水平列还是垂直行？你的代码在哪里？有了 3,899 个代表，我原以为您会知道在 SO 上向我们展示您的代码。所有子级都需要 100% 的宽度才能具有与父级相同的宽度。我们不知道你在说什么，没有代码，没有例子..

标签： html css

【解决方案1】：

您可以使用固定的表格布局来做到这一点。

.table {
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.table > div {
    display: table-cell;
    border: 1px solid red;
}

<div class="table">
    <div>cell</div>
    <div>cell - there is more content inside it</div>
    <div>cell</div>
    <div>cell</div>
    <div>cell</div>
</div>

【讨论】：

【解决方案2】：

如果每个孩子的内容具有相同的宽度，这可以通过 flexbox 以一种优雅的方式完成。检查这个最小的例子：

HTML（插入或删除子项以查看）：

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>

CSS：

.parent {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
    width: 100%;
}

.child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    border: 1px solid green;
    text-align: center;
}

FIDDLE： https://jsfiddle.net/lmgonzalves/fPfvN/165/

【讨论】：

【解决方案3】：

您可以为子 div 使用百分比宽度。此外，您需要使子位置：绝对和父位置：相对。

【讨论】：

您必须对百分比进行硬编码。我希望我的是动态的。
我不相信只用 CSS 就可以做到这一点。使用 javascript 动态地做到这一点。
@ciuschi 你错了。