两栏布局
-
说明:一栏定宽,一栏自适应。这样子做的好处是定宽的那一栏可以做广告,自适应的可以作为内容主体。
-
实现方式: ① float + margin ② 使用position的absolute
例: float+margin
<body>
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
.left{
width: 200px;
height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
三栏布局
-
特点:两边定宽,然后中间的width是auto的,可以自适应内容,再加上margin边距,来进行设定
-
实现方式:
-
使用左右两栏使用float属性,中间栏使用margin属性进行撑开
-
使用position定位实现,即左右两栏使用position进行定位,中间栏使用margin进行定位
-
例: float+margin
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
.left{
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.right{
width: 150px;
height: 300px;
background: green;
float: right;
}
.middle{
height: 300px;
background: red;
margin-left: 220px;
margin-right: 160px;
}
例:position +magin
<body>
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</body>
.left{
background: yellow;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: red;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: green;
}
弹性布局
- 说明:弹性盒子(Flexbox)布局是一种为一维布局而设计的布局方法。一维是你希望内容是按行或者列来布局。可以使用display: flex来将元素变为弹性布局
例:
.container {
display: flex;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
注:该容器的直接子元素会变为弹性项(flex item),并按行排列