七种实现左侧固定,右侧适应两栏自适应的方法"/>
html 紧贴右侧,七种实现左侧固定,右侧适应两栏自适应的方法
8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?
总结一下左边固定的方法,老生常谈的是float方法,bfc方法,也有css3中的flex布局和grid布局,并非所有的布局都会在开发中使用
常用的宽度自适应的方法通常是利用了block水平的元素宽度能够随父容器调节的流动特性,另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中的新型布局flex layout与grid layout。
首先创建html布局最基本的样式1
2
3
4
5
6
7
8
9
左边固定宽度,高度不固定 高度有可能会很小,也可能很大。
这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。
基本的样式是,两个div相距20px, 左侧div宽 120px
基本的样式是,两个盒子相距20px, 左侧盒子宽 120px,右侧盒子宽度自适应。基本的CSS样式如下:1
2
3
4
5
6
7
8
9
10
11
12.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方案1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.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方案1
2
3
4
5
6
7
8
9
10
11
12
13
14.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;,自然也就少了顶端对齐,空格字符占空间等问题。
缺点需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing。
父元素需要清除浮动。
float+margin-left方案1
2
3
4
5
6
7
8
9
10
11.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
使用float+BFC方法
上面的方法都需要通过左侧盒子的宽度,计算某个值,下面三种方法都是不需要计算的。只需要设置两个盒子之间的间隔。1
2
3
4
5
6
7
8
9
10
11
12
13.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,因此右侧盒子不会与浮动的元素重叠。
这种情况下,只需要为左侧的浮动盒子设置margin-right,就可以实现两个盒子的距离了。而右侧盒子是block级别的,所以宽度能实现自适应。
缺点父元素需要清除浮动
flex方案1
2
3
4
5
6
7
8
9
10
11
12.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方案
又一个新型的布局方式。可以满足需求,但这并不是它发挥用处的真正地方。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19.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外侧之间的距离。
更多推荐
html 紧贴右侧,七种实现左侧固定,右侧适应两栏自适应的方法
发布评论