两栏布局
程序员文章站
2022-04-30 11:30:21
...
1、绝对定位方式
<div class="box">
<style>
.box {
position: relative;
}
.box > div {
min-height: 100px;
position: absolute;
}
.left {
left: 0;
width: 300px;
background: red;
}
.right {
left: 320px;
right: 0;
background: blue;
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
2、网格布局
<div class="box">
<style>
.box {
width: 100%;
display: grid;
grid-template-columns: 300px auto;
}
.box > div {
}
.left {
background: red;
}
.right {
background: blue;
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
3、表格布局
<div class="box">
<style>
.box {
width: 100%;
display: table;
}
.box > div {
display: table-cell;
}
.left {
width: 300px;
background: red;
}
.right {
background: blue;
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
4、flex布局
<div class="box">
<style>
.box {
width: 100%;
display: flex;
}
.left {
width: 300px;
background: red;
}
.right {
flex: 1;
background: blue;
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
5、双inline-block
<div class="box">
<style>
.box {
box-sizing: content-box;
font-size: 0;
}
.box > div {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
min-height: 100px;
font-size: 14px;
}
.left {
width: 300px;
background: red;
}
.right {
background: blue;
width: calc(100% - 300px);
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
- 这种方法是通过width: calc(100% - 300px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(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满足顶端对齐。
6、左元素float，右元素margin-left
<div class="box">
<style>
.box {
overflow: hidden;
}
.box > div {
}
.left {
width: 300px;
background: red;
float: left;
}
.right {
background: blue;
margin-left: 320px;
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
7、float + bfc
<div class="box">
<style>
.box {
overflow: hidden;
}
.box > div {
}
.left {
width: 300px;
background: red;
float: left;
}
.right {
background: blue;
overflow: hidden;
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
8、双float方案
<div class="box">
<style>
.box {
overflow: hidden;
box-sizing: content-box;
}
.box > div {
float: left;
box-sizing: border-box;
}
.left {
width: 300px;
background: red;
}
.right {
background: blue;
width: calc(100% - 300px);
}
</style>
<div class="left">left</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>