CSS并排div的自动等宽 [英] CSS side by side div's auto equal widths

问题描述

<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自动采取相等的宽度。

I have a parent div which will contain 2 or 3 child divs. I want child divs to take equal widths automatically.

谢谢

推荐答案

这不是不可能。使用 display：table

。

这个解决方案甚至不是特别难。将在现代浏览器中工作。它不会在IE7中正常工作。

This solution will work in modern browsers. It won't work in IE7.

http://jsfiddle.net/g4dGz/ （三个 div s）

http://jsfiddle.net/g4dGz/1/ （两个 div s）

http://jsfiddle.net/g4dGz/ (three divs)
http://jsfiddle.net/g4dGz/1/ (two divs)

CSS：

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

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

HTML： b

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

这篇关于CSS并排div的自动等宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！