左右佈局
使用浮動即可實現左右佈局
左側定寬右側自適應
html程式碼
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
複製程式碼css程式碼
.left{
background: red;
height: 500px;
width: 300px;
float: left;
}
.right{
background: green;
height: 500px;
margin-left: 300px;
}
複製程式碼
左中右佈局
使用浮動即可實現左中右佈局
左側定寬，右側定寬，中間自適應
html程式碼
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
複製程式碼css程式碼
.left{
background: red;
height: 500px;
width: 300px;
float: left;
}
.right{
background: green;
height: 500px;
float: right;
width: 300px;
}
.middle{
background: yellow;
margin: 0 300px;
height: 500px;
}
複製程式碼