html布局（两列布局的常见⽅式）
描述：当前端开发者拿到ui设计稿，⾸先实现的便是页⾯布局；本节介绍常见的⼏种布局⽅式；当然这些布局⽅式不仅仅⽤来做整个页⾯的布局，在某个弹窗或者⼯具栏中都可以使⽤
1 两列⾃适应布局
1.1 第⼀个div浮动，第⼆个div⽤margin-left的⽅式
⾸先写如下两个div，设置⼀样⾼度，然后效果如下:
<!DOCTYPE html>
<html>
<head>
<title>html布局(两栏布局和三栏布局的常见⽅式)</title>
<style type="text/css">
.left{
height:120px;
background: pink;
}
.right{
height:120px;
background: gray;
}
</style>
</head>
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
</body>
</html>
这⾥运⾏效果是为了强调⼀下，div等块状元素宽度默认值是100%;
⾔归正传；左边设置左浮动，下⾯div会浮动在下⾯，然后设置左侧margin-left即可实现如下效果:
.left{
float:left;
width:200px;
height:120px;
background: pink;
}
.right{
margin-left:200px;
height:120px;
background: gray;
}
1.2 第⼀个div浮动，第⼆个⽤overflow:hidden的⽅式
.
left{
float:left;
width:200px;
table设置内边框
height:120px;
background: pink;
}
.right{
overflow: hidden;
height:120px;
background: gray;
}
1.3 借助display:table实现；该css属性，你可以理解为没有边框的表格，⾥⾯的元素都可以理解为table的单元格内容
<!DOCTYPE html>
<html>
<head>
<title>html布局(两栏布局和三栏布局的常见⽅式)</title>
<style type="text/css">
.box{
display:table;
width: 100%;
}
.left{
display:table-cell;
width:200px;
height:120px;
background: pink;
}
.right{
display:table-cell;
height:220px;
background: gray;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左栏</div>
<div class="right">右栏</div>
</div>
</body>
</html>
上⾯三种是两列⾃适应布局的常⽤⽅式；平时⼯作中可以⾃⾏选取；
应⽤场景不限于整个⽹页，⽐如弹窗窗⼝顶部的标题栏，也可以采取上⾯⽅式；熟练使⽤后，可以⼤⼤提⾼效率
这⾥再强调⼀个点；还是第⼀个div浮动，如果两个div⾼度不同，效果如下
.left{
float:left;
width:200px;
height:120px;
background: pink;
}
.right{
height:220px;
background: gray;
}
很明显，后⾯div移动到了浮动div的下⾯，被覆盖；但是div的⽂字却没有被覆盖，⽽是⾃动避开；这⾥需要特别注意；以后布局可以加以利⽤；
⼀切的细节知识，都会在未来某个点帮你节省效率和提升好⼼情。
2 三栏布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。