阅读 448

CSS 两栏布局和三栏布局

图片.png

两栏布局

图片.png
基础部分的代码:

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    height: 150px;
    background-color: #94E8FF;
}
复制代码

此时的 .left 和 .right 独占一行,如何实现两个 div 元素排在一行呢? 1.设置 display 为 inlin-block inline-block 兼具块级元素可以设置宽高和行内元素不独占一行的特性,设置了 inline-block 的两个 div 之间会有间距,记得消除。由于左边是固定的,总的宽度是 100%,要计算右边的宽度,可以使用 calc 来计算。

.container {
    font-size: 0;    /* 消除间距 */
}
.left, .right {
    display: inline-block;
}
.right {
    width: calc(100% - 100px);   /* 计算宽度,运算符号左右一定要有空格 */
}
复制代码

2.使用 float 处于文档流中的块级元素无法感知到浮动元素的存在,如果设置 .left 为 左浮动,.right 会当 .left 不存在,由于块级元素的默认宽度是父级元素的 100%,此时 .right 的宽度就已经是 100% 了,无需再计算。**别忘了设置 .right 的 margin 值来给 .left 预留空间,让两者看起来是和谐相处的。**这便是第一种方法,代码如下:

.left {
    float: left;
}
.right {
    margin-left: 100px;   /* 为 .left 留出空间 */
}
.container {
    overflow: hidden;    /* 别忘了清除浮动 */
}
复制代码

浮动元素会脱离文档流,直到它碰到父元素的边框或另一浮动元素为止,因此,我们可以还设置 .left、.right 均左浮动,这时,它们便会紧贴着排列在一行。因为 .right 是浮动的,所以需要计算宽度。这是第二种方法:

.left {
    float: left;
}
.right {
    float: left;
    width: calc(100% - 100px);
}
.container {
    overflow: hidden;
}
复制代码

.left 浮动的时候,.right 会无视 .left,有没有不无视,留出位置的可能?有的,让 .right 形成 BFC,.right 就不会和 .left 重合了。BFC 不会忽视浮动元素,这也是它的特点之一。这是第三种方法:

.left {
    float: left;
}
.right {
    overflow: auto;    /* 形成 BFC */
}
.container {
    overflow: hidden;
}
复制代码

3.使用absolute 设置 .left 的 postion 为 absolute,.left 脱离了文档流,.right 会无视 .left 的存在。

.container {
    position: relative;
}
.left {
    postion: absolute;
}
.right {
    margin-left: 100px;
}
复制代码

三栏布局

三栏布局中耳熟能详的便是圣杯布局和双飞翼布局了。圣杯布局来源于2006年的一篇文章:In Search of the Holy Grail。双飞翼布局始于淘宝 UED。两者都是在解决两边固定宽度,中间自适应的三栏布局,并且主要内容要优先渲染,按照 DOM 从上至下的加载原则,中间的自适应部分要放在前面。

圣杯布局

我们首先将布局的基础框架搭出来,在下面代码中,父 div 包含了三个子 div,我们将 .center 写在最前面,方便最先渲染。为了保证窗口缩小时仍然能展示,我们给 body 设置了最小宽度。

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
body {
    min-width: 630px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}

复制代码

图片.png
三个子 div 各占一行显示了,此时我们给三者都加上左浮动看看效果。

.container {
    overflow: hidden;   /* 清除浮动 */
}
.center, .left, .right {
    float: left;
}
复制代码

图片.png

由于 .center 设置了 100% 的宽度,所以 .left 和 .right 都被挤到下面去了,此时我们要解决的问题就是,如何让它两上去,这就要用到 margin 的负值了。我们知道 margin-left: 10px; 是设置 10px 的左外边距,左边要多空出一点,视觉效果上就是向右移动了 10px,那如果 margin-left: -10px; 呢?左外间距要减少 10px,自然是向左移动 10px 了。

我们回到要解决的问题中,因为 .center 的宽度是 100%,所以 .left 和 .right 排在了第二行,可以理解为排在了 .center 的后面。这个时候,.left 要回到 .center 的最左边,便是要向左移动 .center 的宽度,即 100%,.left 移动了知之后,.right 会自动补上 .left 的空位,此时,.right 想要达到 .center 的最右边,只需要向左移动它自己本身的宽度就可以了,即 200px。

.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}
复制代码

图片.png

仔细一看发现,.center 的文字被遮挡了,此时 .left、.right 都覆盖在 .center 的上面,我们要给两者留出位置。

圣杯布局的做法是先设置父元素 .container 的 padding 属性,给 .left、.right 留出空间,两者需要的空间大小便是两者的宽度,然后利用定位属性使其归位。我们先设置 padding 看看效果。

.container {
    padding-left: 100px;
    padding-right: 200px;
}
复制代码

图片.png

由于父元素设置了 padding,所有子元素都往中间挤了,此时只需将 .left、.right 分别向左向右拉到准备的空位就好了。首先将定位属性设置为 relative,即相对自己定位,.left 要向左移动 100px,.right 要向右移动 200px,所以 .left 只要设置 left: -100px; 、.right 设置 right: -200px; 便能达到效果。

.left {
    position: relative;
    left: -100px;
}
.right {
    position: relative;
    right: -200px;
}
复制代码

图片.png
到这里,圣杯布局便完成了,它的核心思想是使用浮动布局,用 padding 为左右元素留空间,灵活使用 margin 的负值和相对定位让元素移动到相应的位置。完整的代码如下:

<div class="container">
     <div class="center">center</div>
     <div class="left">left</div>
     <div class="right">right</div>
</div>

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
    float: left;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}
复制代码

双飞翼布局

双飞翼布局与圣杯布局的前部分一样,在给左右两边元素留出位置的思路有区别。圣杯布局是设置了父元素的 padding 留出空间,之后利用 relative 来归位。双飞翼则是多加了一个 div,将中间自适应部分包裹起来,利用子 div 的 margin 来给左右元素留空间。

<div class="container">
    <div class="center-container">
        <div class="center"></div>
    </div>
    <div class="left">left</div>
    <div class="right">left</div>
<div>

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
}
.center-container {
    width: 100%;
    float: left;
}
.center-container .center {
    height: 150px;
    background-color: #94E8FF;

    margin-left: 100px;        /* 新添加的属性 */
    margin-right: 200px;       /* 新添加的属性 */
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
}
复制代码

图片.png

同样的问题,双飞翼布局通过多加一个 div 并使用了 margin 来实现,圣杯布局则是使用 padding、相对定位(relative)、设置偏移量(left、right)来实现,相对来说,双飞翼布局更容易理解。在圣杯布局中,无限缩小屏幕(假设没有设置 body 的最小宽度),当 .main 的宽度小于 .left 时,会出现布局错乱。

简单的flex布局实现三栏

基础代码:

<div class="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.center {
    height: 150px;
    background-color: #94E8FF;
}

.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}
复制代码

我们首先将容器设置为 Flex 布局:

.container {
    display: flex;
}
复制代码

接下来要解决的问题有,如何将 .left 排列在最左边,和如何将 .center 占满剩余空间。在项目属性的学习中,order 属性可以改变项目的排列顺序,flex-grow 可以定义项目的放大比例。没错,利用这两个属性便能解决我们的问题。

.left {
    order: -1;
}

.center {
    flex-grow: 1;   /* flex: 1; 也行 */
}
复制代码

Flex 布局相对于传统布局更灵活好用,上面只是给出了一个方法,更多的方法期待大家去探索。

感谢阅读本文。 本文整理自CCS布局实践的部分内容。

关注下面的标签,发现更多相似文章
评论