CSS并排div的自动等宽

本文介绍了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自动采取相等的宽度。

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.
  （三个 div  s） 
 
  （两个 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的自动等宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！