关闭

多列自适应布局

87人阅读 评论(0) 收藏 举报
分类:

多列布局是从两列布局引申出来的,所以我们先来看两列布局

两列布局:定宽 + 自适应

HTML结构如下所示:

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

这里的left是定宽,right自适应

1. float + margin

.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px; /* 留出一部分空隙 */
}
  • 优点:兼容性较好,代码简单,IE6不支持
  • 缺点:如果需要在right部分的第一个p上设置clear:bothright中的文字会整体下移,解决这个问题可以用下面的方法

2. float-fix

我们需要变动一下上面的html结构,在right外套一个div

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>r-left</p>
            <p>r-right</p>
        </div>
    </div>
</div>
.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
}
.left {
    float: left;
    width: 100px;
    position: relative;
}
.right {
    margin-left: 120px;
}

这里我们让right-fix右浮动,这时会使leftright-fix处于一个层上。指定width:100%right充满父元素,这时right-fix会在left的下方。所以我们需要再指一个负的margin-leftright-fix覆盖在left上面。同时right指定margin-left抵消掉right-fix设置的负的margin。为了让left显示在最上面,需要给left指定一个position: relative。真是够麻烦的。。。

3. float + overflow

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}

给一个块元素设置了overflow: hidden会触发该块元素的BFC(Block Formating Context)模式。在这里,right块就不会紧贴着它的父元素的左边框了。所以它会和left左右依次排列。
- 优点:兼容性好,只有IE6不支持。设置也比较简单。

4. table

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

这种方式采用了表格布局。table-cell布局的元素会左右依次排列。
- 给parent设置width: 100%是因为默认表格布局的宽度是子元素的宽度。
- table-layout属性可以提高渲染速度,以布局优先的原则
- 由于table-cell布局的元素没法设置margin,所以边距需要设置padding

5. flex

.parent {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1;
}

right设置flex: 1是同时设置了flex-growflex-shrink都设置为1,这样以达到自适应。
- 优点:设置简单,容易理解
- 缺点:flex的兼容问题,性能问题

多列布局:两列定宽 + 自适应

HTML结构如下所示:

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>
  • 多列布局可以由两列布局引申而来
  • 上面两列布局的方法中,第一二种由于清除浮动和复杂性的原因,这里不推荐使用
  • 这里只介绍上面的第三种方法,第四种和第五种方法可以类推使用

float + overflow

.left, .center {
    float: left;
    width: 100px;
    margin-right: 20px;
} 
.right {
    overflow: hidden;
}

两列布局:不定宽 + 自适应

HTML结构如下所示:

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

和定宽加自适应布局类似,不过这里的left不知道宽度
不定宽+自适应布局可以由上面介绍的定宽+自适应布局引伸过来。这里需要分析的地方使第二列的样式是否与第一列的宽度有耦合性。分析如下:
- float+margin/float-fix两种方法第二列需要设置margin,而margin的值是根据第一列的宽设定的,所以具有强耦合性,因而不能实现
- 同理float+overflow可以实现
- table布局可以实现,但同时需要注意
+ .parent中去掉table-layout样式。table-layout是布局优先,而现在是不定宽。
+ left中添加width: 0.1%,设置此主要是为了兼容性考虑
代码如下:

.parent {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 0.1%;
    padding-right: 20px;
}
  • flex可以实现

多列布局:多列不定宽 + 自适应

HTML结构如下所示:

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>
  • 同理,这里的布局方式也可以从不定宽+自适应方式引申而来。
  • 上面提到的方法中,float+overflow, table, flex都可以实现

1. float + overflow

.left,.center {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}

/* p的宽度即是内容的宽度 */
.left p,.center p {
    width: 100px;
}

2. table

.parent {
    display: table;
    width: 100%;
}
.left,.center,.right {
    display: table-cell;
}
.left,.center {
    width: 0.1%;
    padding-right: 20px;
}
.left p,.center p {
    width: 100px;
}

3. flex

.parent {
    display: flex;
}
.left,.center {
    margin-right: 20px;
}
.right {
    flex: 1;
}
.left p,.center p {
    width: 100px;
}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4031次
    • 积分:166
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章存档