CSS 经典布局实现-品字布局

前言

面试中可能会有要求实现品字布局。本文介绍了利用 float 或 inline-block 实现品字布局的方法。

品字布局

品字布局要求实现三个盒子中第一个盒子放在第一层居中，第二个盒子放在第二层靠右，第三个盒子放在第二层靠左，像“品”字一样排列。

该布局的难点是需要把两个盒子定位到第一个盒子的正下方且正好平分，并且第二个盒子要在第三个盒子的右边。

基本的思路为：

• 用 margin: 0 auto; 将第一个盒子水平居中。
• 将另外两个盒子放到第二层。
• 将第二个盒子定位到右下角，将第三个盒子定位到第二个盒子左边。

HTML 代码如下：

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

CSS 默认样式代码如下：

div {
  width: 100px;
  height: 100px;
}
.div1 {
  background-color: red;
}
.div2 {
  background-color: green;
}
.div3 {
  background-color: blue;
}

float + margin

• 用 margin: 0 auto; 将第一个盒子水平居中。
• 将第二个和第三个盒子设置向左浮动，使其浮动到下一行。
• 设置 margin-left 将下面两个盒子移动到对应位置。

.div1 {
  margin: 0 auto;
}
.div2 {
  float: left;
  margin-left: 50%;
}
.div3 {
  float: left;
  margin-left: -200px;
}

float + relative

• 与上面的方法相似，最大的不同是使用相对定位使第三个盒子移动到第二个盒子的左边。

.div3 {
  float: left;
  position: relative;
  left: -200px;
}

float + transform

• 与上面的方法相似，最大的不同是使用 transform 使第三个盒子移动到第二个盒子的左边。

.div3 {
  float: left;
  transform: translate(-200%);
}

inline-block 实现

• 与 float + margin 的方法很相似，最大的不同是将第二个和第三个盒子设置 display: inline-block;，使其换行并处于同一行，这里的效果与使用 float: left; 一样。
• 设置 margin-left 将下面两个盒子移动到对应位置。
• 其实对于第三个盒子的定位同样可以换用相对定位和 transform 。

.div2 {
  display: inline-block;
  margin-left: 50%;
}
.div3 {
  display: inline-block;
  margin-left: -200px;
}

参考资料

前端面试题之CSS篇
品字布局和三栏布局 - 掘金