自适应三栏布局BFC属性

最新推荐文章于 2024-04-11 00:14:29 发布

每天学习一··

最新推荐文章于 2024-04-11 00:14:29 发布

阅读量427

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/qq_42030027/article/details/88602291

版权

(1)自身浮动（2）双飞翼（3）绝对定位三种都是通过设定margin值和定位属性实现自适应三栏。这样一旦左右两侧栏目宽度变化，就要更改margin的值，十分麻烦。

但是在张鑫旭老师的《CSS世界》中提到一种方法，利用BFC属性，随意改变左右两侧的宽度，不需要改变其他值也能实现自适应三栏。具体原因可以参考该书的160页。

触发BFC的情况：

根元素，float属性不为none，overflow的属性为：auto、scroll、hidden，display值为table-cell、table-capation和inline-block，position的值不为relative和static；满足以上任意一种均可触发BFC

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>自适应三栏布局</title>
    <style type="text/css">
    body:after{
content:'';
display: block;
visibility:hidden;
clear:both;
    }
        #le{
            float:left;
            width:100px;
            height:100px;
            background:#ccc;
            margin-right:10px;
            animation:tr 2s infinite alternate;
        }
        #ri{
            float: right;
            width:100px;
            height:100px;
            background:#6e6e6e;
            margin-left:10px;
            animation:tr 2s infinite alternate;
        }
        #center{
            height:100px;
            overflow:hidden;
            word-break:break-all;
            white-space: pre-wrap;
            background-color:#343434;
        }
        @keyframes tr{
            0%{
                width:100px;
            }
            100%{
                width:300px;
            }
        }
    </style>
</head>
<body>
    <div id="le"></div>
    <div id="ri"></div>
    <div id="center">123213</div>
</body>
</html>

每天学习一··

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应三栏布局BFC属性

(1)自身浮动（2）双飞翼（3）绝对定位三种都是通过设定margin值和定位属性实现自适应三栏。这样一旦左右两侧栏目宽度变化，就要更改margin的值，十分麻烦。但是在张鑫旭老师的《CSS世界》中提到一种方法，利用BFC属性，随意改变左右两侧的宽度，不需要改变其他值也能实现自适应三栏。具体原因可以参考该书的160页。触发BFC的情况：根元素，float属性不为none，overflow的属性...
复制链接

扫一扫