多列布局技巧-优快云博客

多列布局

定宽与自适应

分两列布局，其中一列宽度固定，另一列自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试专用</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .parent{width: 300px;height: 200px;border:1px solid black;color: #fff;}
        .left{width: 80px; background: black;}
        .right{background: gray;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</body>
</html>

解决方案一：float + margin

.left{float: left;}
.right{margin-left: 90px;}

优点：容易实现、理解
缺点：兼容性有问题，right中的元素不可以清除浮动，高度会下降

解决方案二： float + margin + (fix)

我们增加一个类为fix的div

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p>    
            <p>right</p>
        </div>
    </div>
</div>

CSS如下

.left{float: left;position}
.right-fix{float:right;width:100%;margin-left:-80px;}
.right{margin-left: 90px;}

优点：兼容ie低版本
缺点：不易写，结构变多

解决方案三：float + overflow

原理：overflow会触发BFC模式，从而实现清除浮动，内容和外界隔离

.left{float:left;margin-right:10px;}
.right{overflow:hidden;}

缺点：ie6不兼容
优点：易实现

解决方案四：table

表格的特性：两个单元格宽度之和一定是整个表格宽度

.parent{display: table;width: 100%;table-layout:fixed;}
.left,.right{display: table-cell;}
.left{padding-right:10px;}

table-layout:fixed;加速了渲染；由于不能设置margin所以设置padding

解决方案五：flex

通常应用于小范围布局，避免性能负担

.parent{display:flex;}
.left{margin-right:10px;}
.right{flex:1;}

多列布局-定宽与自适应

多列布局

定宽与自适应

解决方案一：float + margin

解决方案二： float + margin + (fix)

解决方案三：float + overflow

解决方案四：table

解决方案五：flex