浅谈HTML布局(二)

多列布局

该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局
浅谈HTML布局二

利用float+margin实现

1
2
.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}

注:IE6会有3px的bug

利用float+margin(fix)实现

浅谈HTML布局二

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}
</style>
<div class="parent">
<div class="left"></div>
<div class="right-fix">
<div class="right"></div>
</div>
</div>

使用float+overflow实现

1
2
.left{width:100px;float:left;}
.right{overflow:hidden;}

overflow:hidden,触发 bfc模式,浮动无法影响,隔离其他元素,IE6不支持,左侧left设置margin-left当作left与right之间的边距,右侧利用overflow:hidden 进行形成 bfc模式

如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高

1
2
3
4
.left{width:100px;float:left;}
.right{overflow:hidden;}
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

使用table实现

1
2
3
.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

实用flex实现

1
2
3
.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}

利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 多列布局
    1. 1.1. 利用float+margin实现
    2. 1.2. 利用float+margin(fix)实现
    3. 1.3. 使用float+overflow实现
      1. 1.3.1. 使用table实现
      2. 1.3.2. 实用flex实现