CSS實作兩欄、三欄布局
實作兩欄布局的幾種方式
注：右邊盒子都不用給寬度的
1.
float
，左邊的盒子給
float: left
，右邊盒子給
margin-left: 200px
2.使用絕對定位實作—
absolute
，給父盒子
relative
，左邊的盒子
left: 0， top: 0
，右邊盒子給
margin-left: 200px
3.使用彈性布局—
flex
，左邊盒子寬高固定，右邊盒子設為
flex: 1
(1) 兩欄布局：左側固定寬度，右側自适應
1.float
<style>
.wrap {
overflow: hidden;
border: 1px solid red;
}
/* 脫離文檔流 */
.left {
float: left;
width: 200px;
height: 200px;
}
.right {
margin-left: 200px;
height: 200px;
}
</style>
2.使用絕對定位實作—absolute
<style>
.wrap {
overflow: hidden;
position: relative;
}
/* 脫離文檔流 */
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.right {
margin-left: 200px;
height: 200px;
}
</style>
3.使用表格布局—table
<style>
/* 清除浏覽器預設邊距 */
* {
margin: 0;
padding: 0;
}
/* 表格布局 */
.wrap {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 200px;
height: 200px;
}
.right {
display: table-cell;
height: 200px;
}
</style>
4.使用彈性布局—flex
<style>
.wrap {
display: flex;
}
.left {
height: 200px;
width:100px;
}
.right {
height: 200px;
flex: 1;
}
</style>
(2)三欄布局就是左中右，左右兩邊固定，中間自适應。
雙飛翼布局和聖杯布局都是實作兩邊固定中間自适應的三欄布局的方式
1.絕對定位：左右盒子定位，中間設定為
margin: 0 200px
2.flex：左邊元素
flex：200px 0 0
，中間元素
flex:1
,右邊元素
flex: 0 0 200px
3.float：左邊元素
float: left
，中間元素
margin: 0 200px
，右邊
float: right
1.絕對定位
<style>
/* 絕對定位 */
.left,
.right {
position: absolute;
top: 0;
}
.left {
width: 200px;
left: 0;
}
.middle {
margin: 0 200px;
}
.right {
width: 200px;
right: 0;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="middle">中間</div>
<div class="right">右邊</div>
</body>
2.flex
<style>
body {
display: flex;
padding: 0;
margin: 0;
}
.left {
flex: 200px 0 0;
}
.middle {
flex: 1;
}
.right {
flex: 0 0 200px;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="middle">中間</div>
<div class="right">右邊</div>
</body>
3.雙飛翼
body {
padding: 0;
margin: 0;
}
.left, .middle, .right {
float: left;
}
.left {
width: 200px;
margin-left: -100%; /* 使left移到middle的左邊 */
}
.right {
width: 200px;
margin-left: -200px; /* 使right移到middle的右邊 */
}
.middle {
width: 100%;
}
.inner {
margin: 0 200px;
}
</style>
</head>
<body>
<div class="middle">
<div class="inner">
中間
</div>
</div>
<div class="left">左邊</div>
<div class="right">右邊</div>
</body>
4.浮動
<style>
.left {
float: left;
width: 200px;
}
.middle {
margin: 0 200px;
width: 100%;
}
.right {
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="middle">中間</div>
<div class="right">右邊</div>
</body>
5.聖杯布局
<style>
.container {
padding: 0 220px 0 220px;
overflow: hidden;
}
.left,
.middle,
.right {
position: relative;
float: left;
// 多列等高
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
}
.middle {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
中間
</div>
<div class="left">
左側
</div>
<div class="right">
右側
</div>
</div>
<div class="footer">
尾部
</div>
</body>