前端小笔记:左定宽,右随意
一、要求
想实现左右布局,左边是部分定宽度200px,右边部分自动铺满剩下部分。
二、思路
基本HTML架子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/layout1.css"> </head> <body> <div class="container"> <div class="left"> 我是左边 </div> <div class="right"> 我是右边 </div> </div> </body> </html>
1. 左边div向左浮动,并设置width为200px.
2. 右边div因为左边div脱离文档流,会自动往上靠,然后设置padding-left:200px,内容就会自动从视觉上的右边开始。
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 1000px;
}
.left {
width: 200px;
height: 1000px;
background: greenyellow;
float: left;
}
.right {
background: beige;
height: 1000px;
padding-left: 200px;
/*width: 100%;*/
}
Doing is better than nothing