CSS并排div的自动等宽

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

我有一个父div将包含2或3个子div。我希望孩子divs自动采取相同的宽度。CSS并排div的自动等宽

谢谢

来源

2011-03-18 Faizal Balsania

所以你不想specifiy对儿童的div了'width'？不可能只用CSS。你最接近的解决办法是给他们“宽度：33.33％'。看到这里：http://jsfiddle.net/wBv5r/ – Bazzz 2011-03-18 11:59:54

这不是不可能的。这并不是特别困难，使用display: table。

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

http://jsfiddle.net/g4dGz/（三级div S）
http://jsfiddle.net/g4dGz/1/（二div S）

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>

来源

2011-03-18 14:02:43 thirtydot

你将如何强制这个在IE7中工作。我很想知道。优秀的解决方案三十！ – Chris 2011-12-12 22:09:05

@Chris：我无法想象IE7的纯CSS修复，但有一个JavaScript修复：http://tanalin.com/en/projects/display-table-htc/ – thirtydot 2012-07-03 11:35:11

这种方法如何在最佳实践中查看？当内容不是表格数据时，可以使用“display：table”吗？ – Rikki 2013-08-17 19:34:59

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

来源

2011-03-18 12:01:49 MatBailie

问题是关于可变数量的孩子。不完全是3. – 2014-04-19 15:57:58

@ jakob.j true，但您可以将类添加到包装器中，如contains_1 contains_2，contains_3，如果您有一些后端信息进来，并且您知道div数的上限。例如：.wrapper.contains_4> div {width：25％} – 2015-07-27 13:51:42

.wrapper > div { 
    width: 33.3%; 
}

这并不在IE < = 6，所以你会更好地添加一些常用的类孩子的div并为它创建一个CSS规则。

来源

2011-03-18 12:03:24 kpower

问题是关于可变数量的孩子。不完全是3. – 2014-04-19 15:57:30

@ jakob.j“我有一个父div将包含2或3个子div”... – kpower 2016-03-23 19:54:15

在现代浏览器，你可以使用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>

来源

2014-03-04 08:47:31 pajooh

非常感谢！这在使用'display：table'时特别有用，因为各个子div的高度不同，所以没有选项。 – icke 2015-08-11 12:54:23

对我来说，它比“标记为答案”更好。谢谢！ – Andrei 2016-12-05 16:43:50

下面是一个可行的解决方案。

HTML：

<div id="parent"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

CSS：

#parent{ 
    height: 200px; 
    background: #f00; 
} 
#parent > div{ 
    width: calc(100%/3); 
    height: 100%; 
    background: #fff; 
    float: left; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
#parent > div:nth-child(1){ 
    border-right: 30px solid #f00; 
} 
#parent > div:nth-child(2){ 
    border-right: 15px solid #f00; 
    border-left: 15px solid #f00; 
} 
#parent > div:nth-child(3){ 
    border-left: 30px solid #f00; 
}

来源

2017-07-08 00:53:06 Walex996

CSS并排div的自动等宽

回答

相关问题