关于css:CSS两栏布局

31次阅读

共计 2404 个字符，预计需要花费 7 分钟才能阅读完成。

两栏布局（一侧固定宽度，一侧自适应），在工作中应该是常常应用到，能够说是前端根底了。然而在一次面试中，面试官：在纸上写出你能想到的两栏布局所有形式。我心想：这还不简略。认真想了想 … 猝！

话不多说，上菜！

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;
}

地位调换：