新闻资讯左右布局css,关于css左右布局的那些事

前段时间被面试问道左右布局的问题，今天就来亲自试验下，看看有多少种方法。

问：左边固定像素，右边宽度自适应，并且父级元素的高度是由左边或右边的高度撑开的。

左侧内容

右侧内容

达到类似如下效果

左侧高时.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