乐趣区

关于css: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 就行。

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

退出移动版