CSS两列布局的多种方式
2024-10-19 11:47:21
两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式,欢迎大家补充。
absolute + margin 方式
<div class="container">
<div class="sidebar">固定</div>
<div class="main">自适应</div>
</div>
.container {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 200px;
background: #67c23a;
}
.main {
margin-left: 200px;
height: 300px;
background: #e6a23c;
}
修改 css
就可实现 位置调换
,如下:
.sidebar {
right: 0;
/* ... */
}
.main {
margin-right: 200px;
/* ... */
}
优点
: 交换<div class="sidebar">固定</div>
、 <div class="main">自适应</div>
顺序 ,实现主要内容优先加载渲染。
缺点
:absolute 定位,脱离文档流,当 sidebar 列的高度,超过 main 列的高度,会遮住下面的元素。需要给父盒子设置 overflow 属性。
float + margin 方式
<div class="container">
<div class="sidebar">固定</div>
<div class="main">自适应</div>
</div>
.sidebar {
float: left;
top: 0;
right: 0;
height: 300px;
width: 200px;
background: #67c23a;
}
.main {
margin-left: 200px;
height: 300px;
background: #e6a23c;
}
也支持位置调换:
.sidebar {
float: right;
/* ... */
}
.main {
margin-right: 200px;
/* ... */
}
缺点
:不能实现主要内容优先加载渲染。
float + 负margin 方式
<div class="wrap">
<div class="main">自适应</div>
</div>
<div class="sidebar">固定</div>
.wrap {
float: left;
width: 100%;
}
.main {
margin-left: 200px;
height: 300px;
background: #e6a23c;
}
.sidebar {
float: left;
margin-left: -100%;
height: 300px;
width: 200px;
background: #67c23a;
}
位置调换:
.main {
margin-right: 200px;
/* ... */
}
.sidebar {
float: right;
margin-left: -200px;
/* ... */
}
flex 方式
<div class="container">
<div class="main">自适应</div>
<div class="sidebar">固定</div>
</div>
.container {
display: flex;
}
.main {
flex: 1;
height: 300px;
background: #e6a23c;
}
.sidebar {
flex: none;
/* height: 300px; */
width: 200px;
background: #67c23a;
}
这里有一点需要注意:.sidebar
没有设置高度,会和.container
保持一样的高度。.container
的高度是被.main
撑开的,也就是和.main
高度一样。
位置调换:
.container {
display: flex;
flex-direction: row-reverse;
}
grid 方式
<div class="container">
<div class="main">自适应</div>
<div class="sidebar">固定</div>
</div>
.container {
display: grid;
grid-template-columns: auto 200px;
grid-template-rows: 300px;
}
.main {
background: #e6a23c;
}
.sidebar {
background: #67c23a;
}
这里.main
和.sidebar
高度不单独设置的话,也是同样的高度。
位置调换:
.container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 300px;
grid-template-areas: 'a b';
}
.main {
grid-area: b;
background: #e6a23c;
}
.sidebar {
grid-area: a;
background: #67c23a;
}
float + BFC 方式
<div class="container">
<div class="sidebar">固定</div>
<div class="main">自适应</div>
</div>
.sidebar {
float: left;
width: 200px;
height: 300px;
background: #67c23a;
}
.main {
overflow: hidden;
height: 300px;
background: #e6a23c;
}
位置调换:
.sidebar {
float: right;
/* ... */
}
这里让.main
成为BFC
主要是消除.sidebar
因float
带来的影响,只要能让.main
成为BFC
就行。
此外留给大家一个思考题,还有没有其他方式呢?
最新文章
- json字符串返回到js中乱码
- mysql在ubuntu下的安装
- 查看centos版本号
- 微信自定义菜单view类型获取openid访问网页
- 关于Try/Catch 代码块
- ogg实现oracle到sql server 2005的同步
- demo_04绘制三角形
- JMS &; ActiveMQ小结
- CMap与hash_map效率对照
- java多线程(同步和死锁,生产者和消费者问题)
- 如何编译Apache Hadoop2.2.0源代码
- linux 更新源miss问题
- expdb和impdb使用方法
- 原有vue项目接入typescript
- Windows下搭建kafka运行环境
- python如何安装cv2
- java内存模型(转)
- mysql分区/分片
- mysql定位慢查询
- jdk1.8+SpringAOP注解报java.lang.IllegalArgumentException: error at ::0 can&#39;t find referenced pointcut select错误的不知原因的解决办法[仅供参考]