Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

多方案实现多栏布局 #10

Open
qinyuanf opened this issue Oct 2, 2019 · 0 comments
Open

多方案实现多栏布局 #10

qinyuanf opened this issue Oct 2, 2019 · 0 comments
Labels
CSS css相关话题 小记 日常的问题总结、新技术调研等

Comments

@qinyuanf
Copy link
Owner

qinyuanf commented Oct 2, 2019 •
edited
Loading

多方案实现多栏布局（by 元丰）

目录

背景

实现多栏布局主要用到以下几种方案：

  • float 浮动
  • absolute 绝对定位
  • flex 弹性布局
  • table/table-cell 表格布局
  • float + calc 计算属性
  • grid 布局

水平两栏布局（PC 端）

已知：高度 100 px，左边定宽 100 px，右边自适应。

通用样式

<html>
  <!-- ... -->
  <section class="pc-two-column">
    <div class="left">...</div>
    <div class="right">...</div>
  </section>
  <!-- ... -->
</html>
<style>
* {
  padding: 0;
  margin: 0;
}
.pc-two-column {
  /* BFC 盒模型，防止父元素塌陷 */
  overflow: auto;
  height: 100px;
  margin-bottom: 10px;
}
.pc-two-column > .left {
  width: 100px;
  height: 100%;
  background-color: salmon;
}
.pc-two-column > .right {
  height: 100%;
  background-color: aquamarine;
}
</style>

float 浮动

<html>
  <!-- ... -->
  <section class="pc-two-column pc-two-column--float">
    <div class="left">左侧100px</div>
    <div class="right">float 的形式实现水平两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-two-column--float > .left {
    float: left;
  }
  .pc-two-column--float > .right {
    margin-left: 100px;
  }
</style>

absolute 绝对定位

<html>
  <!-- ... -->
  <section class="pc-two-column pc-two-column--absolute">
    <div class="left">左侧100px</div>
    <div class="right">absolute 的形式实现水平两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-two-column--absolute {
    position: relative;
  }
  .pc-two-column--absolute > .left {
    position: absolute;
    left: 0;
    top: 0;
  }
  .pc-two-column--absolute > .right {
    margin-left: 100px;
  }
</style>

flex 弹性布局

<html>
  <!-- ... -->
  <section class="pc-two-column pc-two-column--flex">
    <div class="left">左侧100px</div>
    <div class="right">flex 的形式实现水平两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-two-column--flex {
    display: flex;
  }
  .pc-two-column--flex > .right {
    flex: 1;
  }
</style>

table/table-cell 表格布局

<html>
  <!-- ... -->
  <section class="pc-two-column pc-two-column--table-cell">
    <div class="left">左侧100px</div>
    <div class="right">table-cell 的形式实现水平两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-two-column--table-cell {
    width: 100%;
    display: table;
  }
  .pc-two-column--table-cell > .left, .pc-two-column--table-cell > .right {
    display: table-cell;
  }
</style>

float + calc 计算属性

<html>
  <!-- ... -->
  <section class="pc-two-column pc-two-column--float-calc">
    <div class="left">左侧100px</div>
    <div class="right">float + calc 的形式实现水平两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-two-column--float-calc > .left {
    float: left;
  }
  .pc-two-column--float-calc > .right{
    float: left;
    width: calc(100% - 100px);
  }
</style>

grid 布局

<html>
  <!-- ... -->
  <section class="pc-two-column pc-two-column--grid">
    <div class="left">左侧100px</div>
    <div class="right">grid 的形式实现水平两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-two-column--grid {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 100px auto;
  }
</style>

水平三栏布局（PC 端）

已知：高度 100 px，左边定宽 100 px，右边定宽 100 px，中间宽度自适应。

通用样式

<html>
  <!-- ... -->
  <section class="pc-three-column">
    <div class="left">...</div>
    <div class="middle">...</div>
    <div class="right">...</div>
  </section>
  <!-- ... -->
</html>
<style>
* {
  padding: 0;
  margin: 0;
}
.pc-three-column {
  /* BFC 盒模型，防止父元素塌陷 */
  overflow: auto;
  height: 100px;
  margin-bottom: 10px;
}
.pc-three-column > .left, .pc-three-column > .right{
  width: 100px;
  height: 100%;
  background-color: tomato;
}
.pc-three-column > .middle {
  height: 100%;
  background-color: violet;
}
</style>

float 浮动

<html>
  <!-- ... -->
  <section class="pc-three-column pc-three-column--float">
    <!-- 注意 html 顺序 -->
    <div class="left">左侧100px</div>
    <div class="right">右侧100px</div>
    <div class="middle">float 的形式实现水平三栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-three-column--float > .left {
    float: left;
  }
  .pc-three-column--float > .right {
    float: right;
  }
</style>

absolute 绝对定位

<html>
  <!-- ... -->
  <section class="pc-three-column pc-three-column--absolute">
    <div class="left">左侧100px</div>
    <div class="middle">absolute 的形式实现水平三栏布局</div>
    <div class="right">右侧100px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-three-column--absolute {
    position: relative;
  }
  .pc-three-column--absolute > .left {
    position: absolute;
    left: 0;
    top: 0;
  }
  .pc-three-column--absolute > .right {
    position: absolute;
    right: 0;
    top: 0;
  }
  .pc-three-column--absolute > .middle {
    position: absolute;
    left: 100px;
    right: 100px;
    top: 0;
  }
</style>

flex 弹性布局

<html>
  <!-- ... -->
  <section class="pc-three-column pc-three-column--flex">
    <div class="left">左侧100px</div>
    <div class="middle">flex 的形式实现水平三栏布局</div>
    <div class="right">右侧100px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-three-column--flex {
    display: flex;
  }
  .pc-three-column--flex > .middle {
    flex: 1;
  }
</style>

table/table-cell 表格布局

<html>
  <!-- ... -->
  <section class="pc-three-column pc-three-column--table-cell">
    <div class="left">左侧100px</div>
    <div class="middle">table-cell 的形式实现水平三栏布局</div>
    <div class="right">右侧100px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-three-column--table-cell {
    width: 100%;
    display: table;
  }
  .pc-three-column--table-cell > .left,
  .pc-three-column--table-cell > .middle,
  .pc-three-column--table-cell > .right {
    display: table-cell;
  }
</style>

float + calc 计算属性

<html>
  <!-- ... -->
  <section class="pc-three-column pc-three-column--float-calc">
    <div class="left">左侧100px</div>
    <div class="middle">float-calc 的形式实现水平三栏布局</div>
    <div class="right">右侧100px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-three-column--float-calc > .left,
  .pc-three-column--float-calc > .middle,
  .pc-three-column--float-calc > .right {
    float: left;
  }
  .pc-three-column--float-calc > .middle {
    width: calc(100% - 200px);
  }
</style>

grid 布局

<html>
  <!-- ... -->
  <section class="pc-three-column pc-three-column--grid">
    <div class="left">左侧100px</div>
    <div class="middle">grid 的形式实现水平三栏布局</div>
    <div class="right">右侧100px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .pc-three-column--grid {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 100px auto 100px;
  }
</style>

垂直两栏布局（移动端）

已知：高度 300 px，顶部定高 44 px，底部自适应。

通用样式

<html>
  <!-- ... -->
  <section class="mobile-two-column">
    <div class="top">...</div>
    <div class="bottom">...</div>
  </section>
  <!-- ... -->
</html>
<style>
* {
  padding: 0;
  margin: 0;
}
.mobile-two-column {
  height: 300px;
  margin-bottom: 10px;
}
.mobile-two-column > .top {
  height: 44px;
  background-color: thistle;
}
.mobile-two-column > .bottom {
  overflow: auto;
  background-color: silver;
}
</style>

absolute 绝对定位

<html>
  <!-- ... -->
 <!-- absolute 绝对定位实现 -->
  <section class="mobile-two-column mobile-two-column--absolute">
    <div class="top">顶部44px</div>
    <div class="bottom">absolute 的形式实现垂直两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-two-column--absolute {
    position: relative;
  }
  .mobile-two-column--absolute > .top {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .mobile-two-column--absolute > .bottom {
    width: 100%;
    position: absolute;
    left: 0;
    top: 44px;
    bottom: 0;
  }
</style>

flex 弹性布局

<html>
  <!-- ... -->
  <section class="mobile-two-column mobile-two-column--flex">
    <div class="top">顶部44px</div>
    <div class="bottom">flex 的形式实现垂直两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-two-column--flex {
    display: flex;
    flex-direction: column;
  }
  .mobile-two-column--flex > .bottom {
    flex: 1;
  }
</style>

table/table-cell 表格布局

<html>
  <!-- ... -->
  <section class="mobile-two-column mobile-two-column--table-cell">
    <div class="top">顶部44px</div>
    <div class="bottom">
      <div class="content">
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
        table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局table-cell 的形式实现垂直两栏布局
      </div>
    </div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-two-column--table-cell {
    width: 100%;
    height: 300px;
    display: table;
  }
  .mobile-two-column--table-cell > .top,
  .mobile-two-column--table-cell > .bottom {
    display: table-row;
  }
  .mobile-two-column--table-cell > .bottom > .content {
    height: 100%;
    overflow: auto;
  }
</style>

calc 计算属性

<html>
  <!-- ... -->
  <section class="mobile-two-column mobile-two-column--calc">
    <div class="top">顶部44px</div>
    <div class="bottom">calc 的形式实现垂直两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-two-column--calc > .bottom {
    height: calc(100% - 44px);
  }
</style>

grid 布局

<html>
  <!-- ... -->
  <section class="mobile-two-column mobile-two-column--grid">
    <div class="top">顶部44px</div>
    <div class="bottom">grid 的形式实现垂直两栏布局</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-two-column--grid {
    display: grid;
    grid-template-rows: 44px auto;
    grid-template-columns: 100%;
  }
</style>

垂直三栏布局（移动端）

已知：高度 300 px，顶部定高 44 px，底部 44 px，中间自适应。

通用样式

<html>
  <!-- ... -->
  <section class="mobile-three-column ">
    <div class="top">...</div>
    <div class="middle">...</div>
    <div class="bottom">...</div>
  </section>
  <!-- ... -->
</html>
<style>
* {
  padding: 0;
  margin: 0;
}
.mobile-three-column {
  height: 300px;
  margin-bottom: 10px;
}
.mobile-three-column > .top {
  height: 44px;
  background-color: sandybrown;
}
.mobile-three-column > .middle {
  overflow: auto;
  background-color: pink;
}
.mobile-three-column > .bottom {
  height: 50px;
  background-color: tomato;
}
</style>

absolute 绝对定位

<html>
  <!-- ... -->
  <section class="mobile-three-column mobile-three-column--absolute">
    <div class="top">顶部44px</div>
    <div class="middle">absolute 的形式实现垂直三栏布局</div>
    <div class="bottom">底部44px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-three-column--absolute {
    position: relative;
  }
  .mobile-three-column--absolute > .top {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .mobile-three-column--absolute > .middle {
    width: 100%;
    position: absolute;
    left: 0;
    top: 44px;
    bottom: 50px;
  }
  .mobile-three-column--absolute > .bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
</style>

flex 弹性布局

<html>
  <!-- ... -->
  <section class="mobile-three-column mobile-three-column--flex">
    <div class="top">顶部44px</div>
    <div class="middle">flex 的形式实现垂直三栏布局</div>
    <div class="bottom">底部44px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-three-column--flex {
    display: flex;
    flex-direction: column;
  }
  .mobile-three-column--flex > .middle {
    flex: 1;
  }
</style>

table/table-cell 表格布局

<html>
  <!-- ... -->
  <section class="mobile-three-column mobile-three-column--table-cell">
    <div class="top">顶部44px</div>
    <div class="middle">
      <div class="content">
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
        table-cell 的形式实现垂直三栏布局
      </div>
    </div>
    <div class="bottom">底部44px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-three-column--table-cell {
    display: table;
  }
  .mobile-three-column--table-cell > .top,
  .mobile-three-column--table-cell > .middle,
  .mobile-three-column--table-cell > .bottom {
    display: table-row;
  }
  .mobile-three-column--table-cell > .middle .content {
    height: 100%;
    overflow: auto;
  }
</style>

calc 计算属性

<html>
  <!-- ... -->
  <section class="mobile-three-column mobile-three-column--calc">
    <div class="top">顶部44px</div>
    <div class="middle">calc 的形式实现垂直三栏布局</div>
    <div class="bottom">底部44px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-three-column--calc > .middle {
    height: calc(100% - 44px - 50px);
  }
</style>

grid 布局

<html>
  <!-- ... -->
  <section class="mobile-three-column mobile-three-column--grid">
    <div class="top">顶部44px</div>
    <div class="middle">grid 的形式实现垂直三栏布局</div>
    <div class="bottom">底部44px</div>
  </section>
  <!-- ... -->
<html>
<style>
  /* 通用样式见上文 */
  .mobile-three-column--grid {
    display: grid;
    grid-template-rows: 44px auto 50px;
    grid-template-columns: 100%;
  }
</style>

简述各种布局方案的优缺点

- 优点 缺点 兼容性 是否支持自适应高度
float浮动 兼容性好 脱离分档流，需要处理好清除浮动相关问题 兼容性好 不支持
absolute绝对定位 快捷 子元素需要脱离文档流，实操性不大 兼容性好 不支持
flex 弹性布局 推荐，比较完美地解决了浮动和绝对定位的缺点 - 移动端完全可以使用，不兼容低版本ie 支持
float+calc计算属性 可动态计算
table 兼容性好 字节占用多，渲染慢等 兼容性好 支持
grid 新标准 - 仅支持现代浏览器，存在兼容性问题 不支持
@qinyuanf qinyuanf added CSS css相关话题 主题 阶段性的主题研究 labels Oct 2, 2019
@qinyuanf qinyuanf changed the title 多栏布局的实践 多方案实现多栏布局 Oct 2, 2019
@qinyuanf qinyuanf added 小记 日常的问题总结、新技术调研等 and removed 主题 阶段性的主题研究 labels Oct 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS css相关话题 小记 日常的问题总结、新技术调研等
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@qinyuanf