编辑

页面布局之多列布局

常见的多列布局：

  • 左列定宽，右列自适应

  • 右列定宽，左列自适应

  • 一列不定宽，一列自适应

  • 两侧定宽，中栏自适应

  • 多列等分布局

左列定宽，右列自适应

使用float和margin实现

.left {
  float: left;
  width: 100px;
}
.right {
  margin-left: 100px;
}
<div class="float-and-margin">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用float和margin(fix)实现。可以优先渲染右边部分。

.left {
  width: 100px;
  float: left;
}
.right-fix {
  width: 100%;
  margin-left: -100px;
  float: right;
}
.right {
  margin-left: 100px;
}
<div class="float-and-margin-fix">
  <div class="right-fix">
    <div class="right"></div>
  </div>
  <div class="left"></div>
</div>

使用float和overflow实现。

左侧 left 设置float脱离文档流，右侧利用overflow: hidden触发 BFC 模式。 浮动无法影响，隔离其它元素（IE6 不支持）

.left {
  width: 100px;
  float: left;
}
.right {
  overflow: hidden;
}
<div class="float-and-overflow">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用table和table-cell实现

.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  width: 100px;
  display: table-cell;
}
.right {
  display: table-cell;
}
<div class="table-and-table-cell parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用flex布局实现

利用右侧容器的flex:1，均分了剩余的宽度。而align-items默认值为stretch，保证左右高度一致。

.parent {
  display: flex;
}
.left {
  width: 100px;
}
.right {
  flex: 1;
}
<div class="flex-layout parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用grid布局实现

.parent {
  display: grid;
  grid-template-columns: 100px 1fr;
}
<div class="grid-layout parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

右列定宽，左列自适应

使用float和margin实现

.left {
  margin-right: -100px;
  width: 100%;
  float: left;
}
.right {
  float: right;
  width: 100px;
}
<div class="float-and-margin">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用table和table-cell实现

.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  display: table-cell;
}
.right {
  width: 100px;
  display: table-cell;
}
<div class="table-and-table-cell parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用flex布局实现

.parent {
  display: flex;
}
.left {
  flex: 1;
}
.right {
  width: 100px;
}
<div class="flex-layout parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用grid布局实现

.parent {
  display: grid;
  grid-template-columns: 1fr 100px;
}
<div class="grid-layout parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

左列不定宽，右列自适应

使用float和overflow实现

.left {
  float: left;
}
.right {
  overflow: hidden;
}
<div class="float-and-overflow">
  <div class="left">inline</div>
  <div class="right"></div>
</div>

使用table布局实现

.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  width: 10%;
  display: table-cell;
}
.right {
  display: table-cell;
}
<div class="tabel-layout parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

使用flex布局实现

.parent {
  display: flex;
}
.right {
  flex: 1;
}

两侧定宽，中栏自适应

使用float 和margin实现

.parent {
  position: relative;
}
.left {
  width: 100px;
  float: left;
}
.right {
  width: 100px;
  float: right;
}
.center {
  margin-left: 100px;
  margin-right: 100px;
}
<div class="float-and-margin parent">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

使用table布局实现

.parent {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.left {
  display: table-cell;
  width: 100px;
}
.right {
  display: table-cell;
  width: 100px;
}
.center {
  display: table-cell;
}
<div class="table-layout parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

使用flex布局实现

.parent {
  display: flex;
}
.left {
  width: 100px;
}
.right {
  width: 100px;
}
.center {
  flex: 1;
}
<div class="flex-layout parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

使用grid布局实现

.parent {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}
<div class="grid-layout parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

圣杯布局

<div class="holy-grail-layout parent">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
.parent {
  overflow: hidden;
  padding: 0 100px;
}

.left {
  float: left;
  position: relative;
  left: -100px;
  width: 100px;
  margin-left: -100%;
}
.right {
  width: 100px;
  margin-left: -100px;
  float: left;
  right: -100px;
  position: relative;
}
.center {
  float: left;
  width: 100%;
}

双飞翼布局

<div class="double-wing-layout parent">
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
</div>
.double-wing-layout.parent {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px;
  margin-left: -100%;
}

#right {
  width: 150px;
  margin-left: -150px;
}

#footer {
  clear: both;
}

多列等宽布局

使用flex布局实现

.parent {
  display: flex;
}
.column {
  flex: 1;
}
<div class="flex-layout parent">
  <div class="left column"></div>
  <div class="center column"></div>
  <div class="right column"></div>
</div>

使用grid布局实现

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<div class="grid-layout parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

使用column布局实现

.parent {
  column-count: 3;
  column-gap: 0;
}
<div class="column-layout parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
上一页页面布局之单列布局下一页React

最后更新于