page contents
首页 问答
正文

两栏布局的实现？

轩辕小不懂 发布于 2021-12-03 14:29
阅读 598
收藏 0
答案 1
分类：WEB前端开发
默认排序 时间排序
2565
Nen
Nen
- 程序员

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满

整个父元素）。

.outer {
 height: 100px;
}
.left {
 float: left;
 width: 200px;
 background: tomato;
}
.right {
 margin-left: 200px;
 width: auto;
 background: gold;
}
利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重
叠，所以两侧就不会发生重叠。
.left{
 width: 100px;
 height: 200px;
 background: red;
 float: left;
}
.right{
 height: 300px;
 background: blue;
 overflow: hidden;
}
利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

.outer {
display: flex; height: 100px;
}
.left { width: 200px; background: tomato;
}
.right { flex: 1; background: gold;
} 

.outer { position: relative; height: 100px; }
.left { position: absolute; width: 200px; height: 100px; background: tomato; }
.right { margin-left: 200px; background: gold; } 

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0

.outer {
 position: relative;
 height: 100px;
}
.left {
 width: 200px;
 background: tomato;
}
.right {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 200px;
 background: gold;
}
请先 登录 后评论
轩辕小不懂
1 关注
 
轩辕小不懂
提出于 2021-12-03 14:29
全部

轩辕小不懂 的其他提问

类似问题