前端面试题:编写html和css实现三栏布局,其中左,右宽度固定,中间宽度随着外层宽度变化自适应变化

方法一

绝对定位

 

<!DOCTYPE html>
<html>
  <head>
    <title>三列布局</title>
    
  </head>
  <body>

    <div class="wrap">
      <div>三列布局1</div>
      <div class="one col-3-one">one</div>
      <div class="three col-3-three">three</div>
      <div class="two col-3-two">two</div>
    </div>

  </body>
</html>

　　css样式

 1 .wrap {
 2   position: relative;
 3 }
 4 
 5 .one{
 6   width: 40px;
 7   height:100px;
 8   background: blue;
 9 }
10 
11 .two {
12   height:100px;
13   background: yellow;
14 }
15 
16 .three {
17   height:100px;
18   width: 40px;
19   background: red;
20 }
21 
22 .col-3-one {
23   position: absolute;
24   left: 0px;
25 }
26 
27 .col-3-three {
28   position: absolute;
29   right: 0px;
30 }
31 
32 .col-3-two {
33   position: static;
34   margin-left: 40px;
35   margin-right: 40px;
36 }

方法二:

浮动

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>三列布局</title>
 5   </head>
 6   <body>
 7 
 8 
 9     <div >
10       <div>三列布局2</div>
11       <div class="one col-3-one-float">one</div>
12       <div class="three col-3-three-float">three</div>
13       <div class="two col-3-two">two</div>
14     </div>
15   </body>
16 </html>

css代码

 1 .wrap {
 2   position: relative;
 3 }
 4 
 5 .one{
 6   width: 40px;
 7   height:100px;
 8   background: blue;
 9 }
10 
11 .two {
12   height:100px;
13   background: yellow;
14 }
15 
16 .three {
17   height:100px;
18   width: 40px;
19   background: red;
20 }
21 
22 .col-3-two {
23   position: static;
24   margin-left: 40px;
25   margin-right: 40px;
26 }
27 
28 .col-3-one-float {
29   float: left;
30 
31 }
32 
33 .col-3-three-float {
34   float: right;
35 }

 注意第二种方法(浮动)

　　在html的布局中,第三个(最右边的)div必须放在中间,也就是说第三个浮动流必须放在正常流的上面,否则,会导致第二个div会占满屏幕，而第三个脱离文档流的div被直接挤到下方。

posted @ 2017-02-28 09:49  被折叠的记忆  阅读(322)  评论(0)  编辑  收藏  举报