<div?class="main">
????<div?class="left">200px</div>
????<div?class="middle">自適應</div>
????<div?class="right">300px</div>
</div>body?{
????margin:?0;
????padding:?0;
}
.main?{
????width:?900px;
????margin:?0?auto;
????height:?600px;
????position：relative;
}
.left?{
????width:?200px;
????background:?rebeccapurple;
????height:?600px;
????position:?absolute;
????top:?0;
????left:?0;
}
.right?{
????width:?300px;
????background:?beige;
????height:?600px;
????position:?absolute;
????top:?0;
????right:?0;
}
.middle?{
????height:?600px;
????margin:?0?210px?0?310px;
????position:?relative;
}我想在main里面進行三列布局，請問應該怎么布局呢
1 回答
西蘭花偉大炮
TA貢獻376條經驗 獲得超318個贊
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title></title>
????????<style>
????????????html,body{margin:?0;height:?100%;}????
????????????/*不加html會出現中間內容區域高度塌陷*/
????????????.left,?.right{
????????????????position:?absolute;
????????????????top:?0;
????????????????height:?100%;
????????????????width:?200px;
????????????}
????????????.left{left:?0;background-color:?#FF8C00;}
????????????.right{right:?0;background-color:?lightpink;}
????????????.main{margin:?0?210px;background-color:?#1E90FF;height:100%;}
????????</style>
????</head>
????<body>
????????<div?class="left">我是左邊部分</div>
????????<div?class="right">我是右邊部分</div>
????????<div?class="main">我是內容部分</div>
????</body>
</html>
- 1 回答
- 0 關注
- 1162 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消