要布局左右兩邊定寬，中間自適應
阿新 • • 發佈：2017-07-15
wrapper center spa block ear pos 修改 src pla
最近在布局時，有一些問題，左右兩邊定寬，中間自適應，首先想到的就是左浮動和右浮動，但是在操作時還是會出現一些問題
1. 采用左邊左浮動，右邊右浮動，中間塊用margin-left/margin-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper{
width: 100%;
margin: 0 auto;
}
.wrapper::after{
content:‘‘;
display: block;
height: 0;
width: 0;
clear: both;
visibility: hidden;
zoom:1;
}
.left{
float: left;
width: 300px;
height: 200px;
background-color: #960;
}
.right{
margin-top: -200px;
float: right;
width: 300px;
height: 200px;
background-color: #690;
}
.center{
height: 200px;
background-color: pink;
margin: 0 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">左邊內容</div>
<div class="center">中間部分</div>
<div class="right">右邊內容</div>
</div>
</body>
</html>
效果圖是這樣的
這裏本想著只要左邊浮動，右邊浮動，中間就用margin-left/right就OK了，但是右邊的div一直在下邊，只能手動修改它的margin-top值-200px
2. 采用絕對定位的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper{
position: relative;
width: 100%;
margin: 0 auto;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100px;
background-color: #690;
}
.right{
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 100px;
background-color: #e32922;
}
.center{
height: 100px;
background-color: #4d6cee;
position: absolute;
left: 200px;
right: 200px;
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="left">左邊內容</div>
<div class="center">中間部分</div>
<div class="right">右邊內容</div>
</div>
</body>
</html>
效果圖是這樣的
目前就認為這兩種方式是明晰的。
要布局左右兩邊定寬，中間自適應