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

最新推荐文章于 2023-03-27 14:44:42 发布

weixin_30907935

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/lxk0301/p/6477450.html

版权

方法一

绝对定位

<!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被直接挤到下方。

转载于:https://www.cnblogs.com/lxk0301/p/6477450.html

weixin_30907935

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题:编写html和css实现三栏布局,其中左,右宽度固定,中间宽度随着外层宽度变化自适应变化...

方法一绝对定位<!DOCTYPE html><html> <head> <title>三列布局</title> </head> <body> <div class="wrap"> <div>三...
复制链接

扫一扫