CSS并排div的自动相等宽度答案

【问题标题】：CSS side by side div's auto equal widthsCSS并排div的自动相等宽度
【发布时间】：2021-12-18 02:30:15
【问题描述】：

<div id="wrapper" style="width:90%;height:100px;background-color:Gray;">
    <div id="one" style="height:100px;background-color:Green;float:left;"></div>
    <div id="two" style="height:100px;background-color:blue;float:left;"></div>
    <div id="three" style="height:100px;background-color:Red;float:left;"></div>
</div>

我有一个包含 2 或 3 个子 div 的父 div。我希望子 div 自动采用相等的宽度。

谢谢

【问题讨论】：

所以您不想为子 div 指定 width？仅使用 CSS 是不可能的。您最接近的解决方案是给他们width:33.33%。见这里：jsfiddle.net/wBv5r

标签： html css

【解决方案1】：

这不是不可能的。使用display: table 甚至不是特别难。

此解决方案 will work 在现代浏览器中。它在 IE7 中不起作用。

http://jsfiddle.net/g4dGz/ （三个divs）
http://jsfiddle.net/g4dGz/1/ （两个divs）

CSS：

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

HTML：

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

【讨论】：

你将如何强制它在 IE7 中工作。我有兴趣知道。优秀的解决方案三十！
@Chris：我想不出针对 IE7 的纯 CSS 修复，但有一个 JavaScript 修复：tanalin.com/en/projects/display-table-htc
在最佳实践中如何看待这种方法？当内容不是表格数据时，使用display: table可以吗？
@Rikki：是的，没关系。表格的污名是在 HTML 中使用<table>s 来保存非表格数据，从语义的角度来看这是不好的。使用display: table-cell 与使用float: left 定位东西没有什么不同。

【解决方案2】：

在现代浏览器中，您可以使用flexbox

three divs 示例

two divs 示例

CSS：

#wrapper {
    display: flex;    
    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    flex-basis: 100%;
}

HTML：

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
</div>

【讨论】：

非常感谢！这在使用 display:table 时特别有用，由于各个子 div 的高度不同而无法选择类似的选项。

【解决方案3】：

您是否尝试过使用width:33%？

【讨论】：

问题是关于可变数量的孩子。不完全是 3。
@jakob.j true 但是如果您有一些后端信息进入并且您知道 div 的数量有上限，您可以将类添加到包装器中，例如 contains_1 contains_2, contains_3。示例：.wrapper.contains_4 > div { 宽度：25% }

【解决方案4】：

为了旧版浏览器的兼容性，这里有一个可行的解决方案。

html:

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

css:

.parent{
    height: 200px;
    background: #f00;
}
.parent > div{
    width: calc(100%/3);
    height: 100%;
    float: left;
    background: #fff;
}

但是，为了使其动态化，因为您知道它是 2 列还是 3 列，您可以将计数放入变量中并执行内部/内联 css：

//$count = 2 或 3

内部 CSS（推荐）

...
<style>
    .parent > div{
        width: calc(100%/<?=$count;?>);
    }
</style>
<body>
...

内联 CSS：

<div class="parent">
    <div style="calc(100%/<?=$count;?>)"></div>
    <div style="calc(100%/<?=$count;?>)"></div>
    <div style="calc(100%/<?=$count;?>)"></div>
</div>

【讨论】：

实际上并没有回答这个问题，因为它实际上不是关于固定数量的单元格，而是 +1 用于使用width 中的函数。例如，您应该能够在包含 div 中设置 data-columns="4"，然后在 CSS 中使用 width=calc(100%/attr(data-columns));

【解决方案5】：

.wrapper > div {
  width: 33.3%;
}

这在 IE

【讨论】：

问题是关于可变数量的孩子。不完全是 3。