两列布局——左侧宽度固定，右侧宽度自适应的两种方法

时间 2019-11-18

标签布局左侧宽度固定右侧自适应两种方法栏目 CSS 繁體版

原文原文链接

　　今天作了一个练习，要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我觉得会很简单，毕竟只是练习，可是我写出了一种方法以后却没能顺利的写出第二种方法。对于网上的一些解决方法我仍是不太满意，因而本身继续琢磨着，问问一些前辈，但愿获得一些思路。终于，皇天不负有心人，在本身翻译的一篇关于BFC的文章上，我找到了解决的方法。css

　　关于左侧宽度固定，右侧宽度自适应两列布局的一种很经常使用的方法我相信你们都知道。就是利用左侧元素浮动，或者绝对定位的方式使其脱离常规文档流，让两个块级元素可以在同一行显示。而后右侧元素 margin-left 的值等于左侧元素宽度，这时右侧元素将紧挨着左侧元素，因为块元素的宽度会自动默认充满剩下的屏幕，因此就实现了右侧自适应的效果了。html

HTML代码以下：浏览器

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div class="one"></div>
    <div class="two">第一种方法</div>
</body>
</html>

CSS代码以下：布局

.one {
    position: absolute;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.two {
    height: 200px;
    margin-left: 300px;
    background-color: red;
}

浏览器上输出效果：学习

　　第二种方法，我利用的是建立一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它能够经过如下任何一种方式来建立：flex

float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

　　关于BFC，在w3c里是这样描述的：在BFC中，每一个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即便在浮动里也是这样的（尽管一个包含块的边框会由于浮动而萎缩），除非这个包含块的内部建立了一个新的BFC。这样，当咱们给右侧的元素单首创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。spa

HTML代码：翻译

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div class="one"></div>
    <div class="two">第二种方法</div>
</body>
</html>

CSS代码：code

.one {
    float: left;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.two {
    overflow: auto;
    height: 200px;
    background-color: red;
}

浏览器输出效果：orm

　　以上仅是我的一些想法，你们还有更好的方法能够说出来一块儿学习学习。若是我有什么讲得不对的地方欢迎你们指正，谢谢你们。