文档章节

七种实现左侧固定,右侧自适应两栏布局的方法

山哥
 山哥
发布于 2017/08/17 20:54
字数 2039
阅读 230
收藏 0

总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。关于最终的效果,可以查看这里

常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中的新型布局flex layoutgrid layout

首先创建基本的HTML布局和最基本的样式。

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div宽 120px
  </div>
</div>

基本的样式是,两个盒子相距20px, 左侧盒子宽 120px,右侧盒子宽度自适应。基本的CSS样式如下:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

下面的代码都是基于这套基本代码做覆盖,通过给容器添加不同的类来实现效果。

inline-block方案

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;	// 消除空格的影响
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;	// 顶端对齐
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px);
}

这种方法是通过width: calc(100% - 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离,以及左侧盒子具体的宽度(content+padding+border),以此计算父容器宽度的100%需要减去的数值。同时,还需要知道右侧盒子的宽度是否包含border的宽度。 在这里,为了简单的计算右侧盒子准确的宽度,设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。 同时,作为两个inline-block的盒子,必须设置vertical-align来使其顶端对齐。 另外,为了准确地应用计算出来的宽度,需要消除div之间的空格,需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。 缺点:

  • 需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing
  • 需要消除空格字符的影响
  • 需要设置vertical-align: top满足顶端对齐。

float方案

.wrapper-double-float {
    overflow: auto;		// 清除浮动
    box-sizing: content-box;
}

.wrapper-double-float .left,
.wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}

本方案和双float方案原理相同,都是通过动态计算宽度来实现自适应。但是,由于浮动的block元素在有空间的情况下会依次紧贴,排列在一行,所以无需设置display: inline-block;,自然也就少了顶端对齐,空格字符占空间等问题。

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

不过由于应用了浮动,父元素需要清除浮动。 缺点:

  • 需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing
  • 父元素需要清除浮动。

float+margin-left方案

.wrapper-float {
    overflow: hidden;		// 清除浮动
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

上面两种方案都是利用了CSS的calc()函数来计算宽度值。下面两种方案则是利用了block级别的元素盒子的宽度具有填满父容器,并随着父容器的宽度自适应流动特性。 但是block级别的元素都是独占一行的,所以要想办法让两个block排列到一起。 我们知道,block级别的元素会认为浮动的元素不存在,但是inline级别的元素能识别到浮动的元素。这样,block级别的元素就可以和浮动的元素同处一行了。 为了让右侧盒子和左侧盒子保持距离,需要为左侧盒子留出足够的距离。这个距离的大小为左侧盒子的宽度以及两个盒子之间的距离之和。然后将该值设置为右侧盒子的margin-left。 缺点:

  • 需要清除浮动
  • 需要计算右侧盒子的margin-left

使用absolute+margin-left方法

另外一种让两个block排列到一起的方法是对左侧盒子使用position: absolute的绝对定位。这样,右侧盒子也能无视掉它。

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

缺点:

  • 使用了绝对定位,若是用在某个div中,需要更改父容器的position
  • 没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

使用float+BFC方法

上面的方法都需要通过左侧盒子的宽度,计算某个值,下面三种方法都是不需要计算的。只需要设置两个盒子之间的间隔。

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

这个方案同样是利用了左侧浮动,但是右侧盒子通过overflow: auto;形成了BFC,因此右侧盒子不会与浮动的元素重叠。

an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap the margin box of any floats in the same block formatting context as the element itself。

这种情况下,只需要为左侧的浮动盒子设置margin-right,就可以实现两个盒子的距离了。而右侧盒子是block级别的,所以宽度能实现自适应。 缺点:

  • 父元素需要清除浮动

flex方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

flex可以说是最好的方案了,代码少,使用简单。有朝一日,大家都改用现代浏览器,就可以使用了。 需要注意的是,flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。 为了让两个盒子高度自动,需要设置: align-items: flex-start;

grid方案

又一个新型的布局方式。可以满足需求,但这并不是它发挥用处的真正地方。

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1;
}

.wrapper-grid .right {
    grid-column: 2;
}

注意:

  • grid布局也有列等高的默认效果。需要设置: align-items: start;
  • grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候,grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。

极限情况

最后可以再看一下在父容器极限小的情况下,不同方案的表现。主要分成四种情况:

  • 动态计算宽度的情况

    两种方案: 双inline-block方案和双float方案。宽度极限小时,右侧的div宽度会非常小,由于遵循流动布局,所以右侧div会移动到下一行。

  • 动态计算右侧margin-left的情况

    两种方案: float+margin-left方案和absolute+margin-left方案。宽度极限小时,由于右侧的div忽略了文档流中左侧div的存在,所以其依旧会存在于这一行,并被隐藏。

  • float+BFC方案的情况

    这种情况下,由于BFC与float的特殊关系,右侧div在宽度减小到最小后,也会掉落到下一行。

  • flexgrid的情况

    这种情况下,默认两种布局方式都不会放不下的div移动到下一行。不过 flex布局可以通过 flex-flow: wrap;来设置多余的div移动到下一行。 grid布局暂不支持。

本文转载自:https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/

山哥

山哥

粉丝 246
博文 354
码字总数 136686
作品 0
南京
程序员
私信 提问
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

Eddie_yang
2018/11/15
25
0
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
0
0
三种三栏网页宽度自适应布局方法

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

乱世中的单纯
2016/03/14
768
0
Bootstrap 如何建立左侧固定宽度,右边自适应布局?

刚开始接触Bootstrap,现在需要左右两栏布局,左栏固定布局宽240px,右侧自适应布局。查了手册,例子中要么全是固定布局,要么全是自适应布局,请问这个如何解决?请高手指点,谢谢。...

Jacky.Wang
2013/06/08
26.3K
7
三种三栏网页宽度自适应布局方法,转载大神的,适合收藏

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

曾杨
2014/03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

存储过程无参数,in,out ,in out 的用法

select * from scott.emp where empno=7839 or empno=7566 select * from emp5 create table emp5 as select * from scott.emp -----------------in create or replace procedure raisesalar......

颜丽
今天
2
0
SOFAJRaft-RheaKV 是如何使用 Raft 的 | SOFAJRaft 实现原理

SOFAStack Scalable Open Financial Architecture Stack 是蚂蚁金服自主研发的金融级分布式架构,包含了构建金融级云原生架构所需的各个组件,是在金融场景里锤炼出来的最佳实践。 本文为《剖...

SOFAStack
今天
2
0
同一父类,不同子类集合可判断该元素组是否相等

判断集合是否相等时只关注元素是否相等,无需考虑类型,即同调父类AbstractList里的equal方法 源码如下: public boolean equals(Object o) { if (o == this) return true; if (!(o instance...

恋码之子
今天
2
0
PTH建设模块划分

todo

春哥大魔王的博客
今天
2
0
spring循环依赖

循环依赖解决 constructor(此种无法解决) (看完sertter之后再来看这部分吧)我想看过下部分setter解决循环依赖的实现之后,肯定有想法为啥constructor无法实现,我们同样可以提前曝光一个S...

lazy~
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部