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的自動等寬

回答

相關問題