三栏布局中间流动（固比固）的实现

最新推荐文章于 2021-08-13 09:31:04 发布

diaobiteng1128

最新推荐文章于 2021-08-13 09:31:04 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/luyuefeng/p/8535483.html

版权

1.使用float属性。

css:

.left{
   float:left;
   width:200px;
   height:100px;
   background:blue;
}
.middle{
　　height:100px;
　　margin:0 200px;
　　background:black;
}
.right{
   float:right;
   width:200px;
   height:100px;
   background:green;
}

html:

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</body>

注意middl层的标签位置应写在最后面。

2.使用position属性

css:

.left{
     position: absolute;
     top:0;
     left:0;
     width:200px;
     height:100px;
     background:blue;
}
.middle{
     height:100px;
     margin:0 200px;
     background:black;
}
.right{
     position: absolute;
     top:0;
     right:0;
     width:200px;
     height:100px;
     background:green;
}

html:

<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</body>

3.BFC（块级格式化上下文）

css:

.left{
     float:left;
     width:200px;
     height:100px;
     background:blue;
}
.middle{
     height:100px;
     overflow:hidden;/*触发BFC格式*/
     background:black;
}
.right{
     float:right;
     width:200px;
     height:100px;
     background:green;
}

html:

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</body>

注意这里的middl层的标签位置也应写在最后面。

BFC是W3C CSS 2.1规范中的一个概念，决定了元素如何对内容进行定位，以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。

BFC元素最重要的一点就是与外部元素不影响，即碰到浮动元素也不会与其重叠。

转载于:https://www.cnblogs.com/luyuefeng/p/8535483.html

diaobiteng1128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏布局中间流动（固比固）的实现

1.使用float属性。css:.left{ float:left; width:200px; height:100px; background:blue;}.middle{　　height:100px;　　margin:0 200px;　　background:black;}.right{ float:ri...
复制链接

扫一扫