左右两栏布局
在网页中我们常常看见有左右两栏布局,左边宽度固定,右边宽度自适应的,比如下面这样
那么怎样实现这样的布局呢?我们可能会想到浮动,flex,grid布局等等。
新建一个HTML页面,结构如下
<div class="wrapper">
<div class="list">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</div>
<div class="context">
内容内容
</div>
</div>
使用浮动布局,样式可以这样写
.list {
float: left;
width: 200px;
}
.context {
border-left: 200px solid #999;
height: 500px;
}
使用flex布局,样式可以这样写
.wrapper {
display: flex;
}
.list {
width: 200px;
background: #999;
}
.context {
flex: 1;
height: 500px;
}
使用grid布局,样式可以这样写
.wrapper {
display: grid;
grid-template-columns: 200px auto;
}
.list {
background: #999;
}
.context {
height: 500px;
}
总结:布局实现方法多种多样,选择那一种当然是仁者见仁,智者见智了,但是兼容问题也不能忽视。