今天是猴年的第一天班，也是新的起點(diǎn)。
分享一個(gè)如何用css實(shí)現(xiàn)我們?cè)诠ぷ髦谐Ｒ姷膬闪胁季郑?.左側(cè)固定寬度，高度自適應(yīng)右側(cè)；2.左側(cè)寬度高度固定，右側(cè)自適應(yīng)寬高；3.左側(cè)、右側(cè)固定寬，中間自適應(yīng)。
1.左側(cè)固定寬度，高度自適應(yīng)右側(cè)
- 效果圖
pic1.png
pic2.png
- html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側(cè)固定寬，自適應(yīng)右側(cè)高度</title>
<style>
.main{
position: relative;
color: #fff;
}
.left{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: #f00;
}
.right{
height: 200px;
margin-left: 300px;
background: #000;
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
你看代碼，左側(cè)確實(shí)沒有定高，右側(cè)也沒有定寬。
2.左側(cè)寬度高度固定，右側(cè)自適應(yīng)寬高
- 效果圖
pic3.png
- html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側(cè)寬度高度固定，右側(cè)自適應(yīng)寬高</title>
<style>
.main{
overflow: hidden;
color: #fff;
}
.left{
float: left;
width: 300px;
height: 200px;
background: #f00;
}
.right{
margin-left: -300px;
padding-bottom: 9999px;
margin-bottom: -9999px;
background: #000;
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
你看代碼，左側(cè)確實(shí)定了寬高，右側(cè)寬高都沒有定。
3.左側(cè)、右側(cè)固定寬，中間自適應(yīng)
- 效果圖
pic4.png
pic5.png
- html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側(cè)、右側(cè)固定寬，中間自適應(yīng)</title>
<style>
.fl{
float: left;
}
.main{
color: #fff;
}
.center{
background: #9A0069;
width: 100%;
height: 300px;
}
.center .content{
padding: 0 100px;
}
.left{
width: 100px;
height: 300px;
margin-left: -100%;
background: #009A61;
}
.right{
width: 200px;
height: 300px;
background: #00529A;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="main">
<div class="center fl">
<div class="content">
center
</div>
</div>
<div class="left fl">left</div>
<div class="right fl">right</div>
</div>
</body>
</html>
你看代碼，左側(cè)、右側(cè)都固定了寬度，中間寬度自適應(yīng)了。關(guān)鍵點(diǎn)是：float:left配合margin-left使用。同時(shí)center的div寫在了左右的前面，更加符合語(yǔ)義化。
但我們這里高度是寫死的，如何實(shí)現(xiàn)既保持“左右固定寬，中間自適應(yīng)”，又能夠以一邊的高度為基準(zhǔn)，其他兩個(gè)高度自適應(yīng)呢？ 你可以參考1,2的代碼來(lái)實(shí)現(xiàn)，這里就不寫了。
