布局之两列三列

面试之路

自学前端以来，在今年四五月还有暑假投了一些实习生岗位，深深的感到自己还有很多欠缺，每次面试也都发现自己遗漏了许多知识点。现在想把他们记录下来，为了自己方便查阅，也为了“金九银十”更好地找工作。

常见的布局

1.两列布局

1.1左侧固定宽度，右侧自适应宽度
 1 //方法一
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>两列布局</title>
 7 <style type="text/css">
 8 #side{
 9     background: red;
10     height: 400px;
11     width: 120px;
12     float: left;//左浮动
13 }
14 #main {
15     background:pink;
16     height: 400px;
17     margin-left: 120px;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="side">side的内容</div>
23 <div id="main">main的内容</div>
24 </body>
25 </html>

 

效果：当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变 

 1 //方法二
 2 <style type="text/css">
 3     *{
 4         padding:0;
 5         margin: 0;
 6     }
 7     #side{
 8         background: red;
 9         position:absolute;//用绝对定位，但要指定宽和高，否则盒子会自适应内容大小
10         top: 0;
11         left:0;
12         width:120px;
13         height:400px;
14     }
15     #main {
16         background:pink;
17         height: 400px;
18         margin-left: 120px;
19     }
20 </style>

 

1.2左侧固定宽度，高度自适应右侧
 1 //div
 2 <div id="wrap">
 3     <div id="side">side的内容</div>
 4     <div id="main">main的内容</div>
 5 </div>
 6 
 7 //css
 8     *{
 9         padding:0;
10         margin: 0;
11     }
12     #wrap{
13         position: relative;
14         border:2px solid #000;//方便起见，给包裹层加了边框
15     }
16     #side{
17         background: red;
18         position:absolute;
19         top: 0;
20         left:0;
21         bottom:0;//***
22         width: 300px;
23     }
24     #main {
25         background:pink;
26         height: 400px;
27         margin-left: 300px;
28     }

 

效果：左侧没有定高，右侧也没有定宽。左侧的高度自适应右侧。***这句不可缺少，否则固定定位的元素根据内容自适应大小。 

2.三列布局

2.1两边固定宽度，中间自适应宽度
//div：利用float
<div id="side">side的内容</div>
<div id="side1">side1的内容</div>
<div id="main">main的内容</div>

//css
 *{
    padding:0;
    margin: 0;
  }
#side{
    background: red;
    float: left;
    height: 400px;
    width: 120px;
}
#main {
    background:pink;
    height: 400px;
    border:3px solid #000;
}
#side1 {
    background: yellow;
    height: 400px;
    width: 120px;
    float: right;
}

 

效果：

两边的宽度固定，中间是自适应宽度，可以随着浏览器大小而调整。 

 

这里有话说：main的宽度是多少？（面试中遇到的）main占了整个窗口的宽度，因为side和side1都是浮动元素，不占据文档流，因此main占了整个宽度。但是为什么“main的内容”出现在这个位置而不是被side遮住。这里我理解的是，如果是内联元素，则元素会环绕浮动元素排列。（如果有不对的地方还请指正）

 1 //方法二:利用定位
 2         //css
 3         #side{
 4             width:200px;
 5             height:400px;
 6             background:red;
 7             position:absolute;
 8             left:0;
 9             top:0;
10         }
11         #main{
12             height:400px;
13             margin:0px 310px 0 210px;
14             background:pink;
15         }
16         #side1{
17             height:400px;
18             width:300px;
19             position:absolute;
20             top:0;
21             right:0;
22             background:yellow;
23         }

 

效果：左右两列绝对定位，分别靠左和靠右，中间为相对定位，左右margin分别设置为两列的宽度即可。如果列与列之间需要间隙，则增加相应的nargin值。

更新中。。。

posted @ 2016-07-18 22:44  destinyruru  阅读(193)  评论(0)  编辑  收藏  举报