2019-11-29 seo达人
两列布局的几种方法
html结构
<div class="content">
<div class="content-left">
左侧固定200px
</div>
<div class="content-right">
右侧自适应
</div>
</div>
1.通过float和margin-left
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content{
overflow: hidden;
}
/ 脱离文档流 /
.content-left {
float: left;
width: 200px;
height: 200px;
background: red;
}
.content-right {
/ 通过margin-left将左边位置空出 /
margin-left: 200px;
background: blue;
height: 200px;
}
2.通过 position: absolute;绝对定位
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
position: relative;
}
/ 脱离文档流 /
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content-right {
/ 通过margin-left将左边位置空出 /
margin-left: 200px;
background: blue;
height: 200px;
}
3.通过flex弹性布局
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
display: flex;
}
.content-left {
/ 除了width: 200px;还可以flex-basis: 200px; /
width: 200px;
height: 200px;
background: red;
}
.content-right {
/ flex:1;将剩余空间分给它 /
flex: 1;
background: blue;
height: 200px;
}
4.通过 display: table;表格布局
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
display: table;
/ 必须给父级定宽不然自适应盒子没定宽只会由内容撑开 /
width: 100%;
}
.content-left {
display: table-cell;
width: 200px;
height: 200px;
background: red;
}
.content-right {
display: table-cell;
background: blue;
height: 200px;
}
5.通过inline-block和calc（）函数
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content {
/ 必须加font-size=0;把inline-block默认间距去掉，
不过设置后里面文字不显示了可以给里面块设置font-size:20px;
或者把两个块之间的换行删掉也能去掉间距/
font-size: 0;
overflow: hidden;
}
.content-left {
font-size: 20px;
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
.content-right {
font-size: 20px;
display: inline-block;
background: blue;
height: 200px;
/ 注意calc里的运算符两边要有空格 /
width: calc(100% - 200px);
}
6.通过float和calc()函数，左右两块都要浮动
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
}
.content-left {
float: left;
width: 200px;
height: 200px;
background: red;
}
.content-right {
float: left;
background: blue;
height: 200px;
/ 注意calc里的运算符两边要有空格 /
width: calc(100% - 200px);
}
7.使用grid布局
/ 清除浏览器默认边距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
display: grid;
grid-template-columns: 200px 1fr;
/ grid布局也有列等高的默认效果。需要设置: align-items: start;。 /
align-items: start;
}
.content-left {
height: 200px;
background: red;
/ grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候，
grid布局默认是box-sizing设置的盒宽度之间的位置。
而flex则是使用两个div的border或者padding外侧之间的距离。 */
box-sizing: border-box;
grid-column: 1;
}
.content-right {
background: blue;
height: 200px;
box-sizing: border-box;
grid-column: 2;
}