本文介绍了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的自动等宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-12 14:49