css里怎么使元素按高平均分布（或者用别的方法）

html-css017

css里怎么使元素按高平均分布（或者用别的方法）,第1张

用百分比来做，比如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%是不能完全达到百分百，但在显示界面基本看不出什么了

先看看等分的布局方案

1. float

兼容性较好（IE 8以上）

**2. flex **

兼容性较差（flex属于css3）

兼容性：IE8及以上

3. table

兼容性：可以兼容 IE 8

1. table

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

2. flex

3. float

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

1、打开Excel，可以看见行高不齐。

2、点击选中需要修改行高的所有表格区域。

3、在格式里，点击行高选项。

4、点击行高后会弹出如图所示的对话框。

5、接下来修改行高值为20（根据自己的需要修改），点击确定。

6、即可看到该表格的行高已被修改成统一行高20。