[ 基础系列 ] - CSS 小测 14本篇是张鑫旭老师的 CSS 基础测试16 的阅后笔记。显然，这是一个常规的两栏

系列文章

说在前面

本篇是张鑫旭老师的 CSS 基础测试16 的阅后笔记。

老规矩，先上题目：

需求：

4 种实现方案
点我答题

分析

显然，这是一个常规的两栏布局，实现方案很多，我们先来详细看看具体需求。

题目一

需求是兼容 IE8+，并且这里已经设定了 quiz-h 的布局是 table-cell。

显然，这里我们可以给整个 quiz 设置 display: table，然后再给 quiz-p 设置 display: table-cell 就能实现两栏布局了：

/* reset */
.quiz,
.quiz-h,
.quiz-p {
  margin: 0;
  padding: 0;
}

.quiz {
  display: table;
}

.quiz-h {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
}

.quiz-p {
  display: table-cell;
  padding: 0 10px;
}

事实上，连 .quiz 的 display: table 也是可以去掉的，其原因是 css 的匿名表格特性：

CSS2.1 表格模型中的元素，可能不会全部包含在除 HTML 之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名 table 对象，使其符合 table/inline-table、table-row、table-cell 的三层嵌套关系。

翻译成人话就是，如果我们给子元素设置了 display: table-cell，即使没有给父元素设置 display: table-row，浏览器也会在解析的时候自动加上的。

题目二

需求是兼容 IE10+，并且这里已经设定了 quiz 的布局是 flex。

flex 想必大家都非常熟悉了，按最常规的思路，使用 flex: auto 即可：

/* reset */
.quiz,
.quiz-h,
.quiz-p {
  margin: 0;
  padding: 0;
}

.quiz {
  display: flex;
}

.quiz-h {
  margin: auto 0;
  padding: 0 10px;
}

.quiz-p {
  flex: auto;
  padding: 0 10px;
}

当然，在 flex 布局下，还有一种更 Hack 的解决方案：

/* reset */
.quiz,
.quiz-h,
.quiz-p {
  margin: 0;
  padding: 0;
}

.quiz-h,
.quiz-p {
  padding: 0 10px;
}

.quiz {
  display: flex;
}

.quiz-h {
  margin: auto 0;
}

题目三

需求是兼容 IE10+，并且这里已经设定了 quiz-h 和 quiz-hp 为 inline-block。

既然都是 inline-block 了，那怎么两个块还是换行了？

显然这里是文本过长导致的换行，那解决方案就很清晰了，让 quiz 不换行，再让 quiz-p 换行即可：

/* reset */
.quiz,
.quiz-h,
.quiz-p {
  margin: 0;
  padding: 0;
}

.quiz-h,
.quiz-p {
  padding: 0 10px;
  vertical-align:middle;
}

.quiz {
  white-space:nowrap;
}

.quiz-h {
  padding-right:5.5rem;
  white-space:normal;
}

题目四

需求是兼容 IE8+，并且这里已经设定了 quiz-h 为 absolute。

题目的意思显然是让我们通过绝对定位让左侧实现垂直居中，右边加一个安全外边距来实现两栏布局。

通常绝对定位实现垂直居中的方法是配合 transform，不过要兼容 IE8+ 肯定是不能使用这个属性了。

那么我们这里选择使用 margin 负值的方式来让 quiz-h 居中：

/* reset */
.quiz,
.quiz-h,
.quiz-p {
  margin: 0;
  padding: 0;
}

.quiz-h,
.quiz-p {
  padding: 0 10px;
}

.quiz {
  position: relative;
}

.quiz-h {
  top: 50%;
  height: 100px;
  line-height: 100px;
  margin-top: -50px;
}

.quiz-p {
  margin-left: 5rem;
}