0
点赞
收藏
分享

微信扫一扫

Android 系统启动流程

老北京的热干面 2024-02-09 阅读 20
css前端

三列布局是指左右两列定宽,中间自适应。最终效果如下:
在这里插入图片描述
HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

公共CSS:

.container {
  width: 400px;
  height: 200px;
}
.left{
  width: 100px;
  height: 200px;
  background-color:orange;
}
.right{
  width: 100px;
  height: 200px;
  background-color:orange;
}
.center {
  height: 200px;
  background-color: #d0e4fe;
}

一. float 浮动

方法一:float left + float right

由于设置 float: right; 不会影响浮动元素左侧元素的布局,所以首先需要将 HTML 结构调整如下:

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

然后给左列开启左浮动,右列开始右浮动。

.left {
  float: left;
}
.right {
  float: right;
}

二. position 定位

方法二:absolute + calc()

.left {
  position: absolute;
  left: 0;
  top: 0;
}
.center {
  width: calc(100% - 200px);
  margin-left: 100px;
  margin-right: 100px;
}
.right {
  position: absolute;
  right: 0;
  bottom: 0;
}

三. flex 布局

方法三:flex:1;

.container {
  display: flex;
}
.center {
  flex: 1;
}

四. grid 布局

方案四:grid

.container {
  display: grid;
  gird-template-columns: 100px 1fr 100px;
}
举报

相关推荐

0 条评论