CSS-两栏布局

_明么

两栏布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了。然而在一次面试中,面试官:在纸上写出你能想到的两栏布局所有方式。我心想:这还不简单。仔细想了想...猝!

话不多说,上菜!

  • 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主要是消除.sidebarfloat带来的影响,只要能让.main成为BFC就行。

此外留给大家一个思考题,还有没有其他方式呢?

阅读 601
18 声望
1 粉丝
0 条评论
你知道吗?

18 声望
1 粉丝
宣传栏