CSS常用布局之——等分等高解决方案

html-css028

CSS常用布局之——等分等高解决方案,第1张

先看看等分的布局方案

1. float

兼容性较好（IE 8以上）

**2. flex **

兼容性较差（flex属于css3）

兼容性：IE8及以上

3. table

兼容性：可以兼容 IE 8

1. table

利用 table 的特性——每列等宽

2. flex

3. float

伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

用百分比来做，比如html如下

<div class="demo">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

css如下

.demo{width: 1000pxheight: 300px}

.box{width: 100%height: 33.3%}

效果就是demo被box均分为3个宽1000高100的三个块，当然，3个33.3%是不能完全达到百分百，但在显示界面基本看不出什么了