前段时间被面试问道左右布局的问题,今天就来亲自试验下,看看有多少种方法。
问:左边固定像素,右边宽度自适应,并且父级元素的高度是由左边或右边的高度撑开的。
左侧内容
右侧内容
达到类似如下效果
左侧高时.png
右侧高时.png
首先是想到的flex布局
.main {
width: 100%;
display: flex;
border: 1px solid red;
}
.left {
width: 300px;
flex: none;
border-right: 1px solid red;
}
.right {
width: 100%;
}
flex布局可以轻而易举的实现效果
然后是浮动float
.main {
width: 100%;
overflow: hidden;
border: 1px solid red;
}
.left {
width: 300px;
float: left;
border-right: 1px solid red;
}
.right {
margin-left: 300px;
border-left: 1px solid red;
}
浮动布局可以将父元素撑开,但是左右两个子元素并不互相影响高度,所以中间那条线,是左边和右边一个边框重叠的效果。但如果需要两个子元素有不同的背景颜色的话,就不是这样的写法了。
浮动如果是子元素带背景,我是如下写法
.main {
width: 100%;
overflow: hidden;
border: 1px solid red;
position: relative;
}
.main:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: orangered;
z-index: -1;
}
.main:after{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 300px;
right: 0;
background: yellow;
z-index: -1;
}
.left {
width: 300px;
float: left;
background: orangered;
border-right: 1px solid red;
}
.right {
margin-left: 300px;
background: yellow;
border-left: 1px solid red;
}
浮动带背景时
行内块元素 display:inline-block
.main {
width: 100%;
border: 1px solid red;
font-size: 0;
}
.left {
width: 300px;
display: inline-block;
border-right: 1px solid red;
font-size: 14px;
}
.right {
display: inline-block;
border-left: 1px solid red;
height: 100%;
width: calc(100% - 301px);
font-size: 14px;
vertical-align: top;
margin-left: -1px;
}
行内块元素如果要给子元素加背景参考浮动即可。
表格或display:table
.main {
width: 100%;
border: 1px solid red;
display: table;
}
.left {
width: 300px;
display: table-cell;
border-right: 1px solid red;
background: aquamarine;
}
.right {
display: table-cell;
background: antiquewhite;
}
类表格的布局应该说是比较简单的,也适用子元素带背景的。
grid网格布局
.main {
width: 100%;
border: 1px solid red;
display: grid;
grid-template-columns: 300px auto;
}
.left {
border-right: 1px solid red;
background: aquamarine;
}
.right {
background: antiquewhite;
}
grid布局的写法那就更简单了,只需要在父级元素定义grid即可。
table和grid效果图.png