CSS基础测试16 - 两栏自适应

[JaimeCheng]

题目：

原issue

回答： 8分 方法一

.quiz {
  display: table;
}
.quiz-h {
  vertical-align: middle;
  padding: 0 10px;
  margin: 0;
}
.quiz-p {
  text-align: justify;
  padding: 0 10px;
}

方法二

.quiz {
  align-items: center;
}
.quiz-h {
  margin: 0 10px;
}
.quiz-p {
  flex: 1;
  text-align: justify;
  margin: 0 10px;
}

方法三

.quiz {
  white-space: nowrap;
}
.quiz-h {
  margin: 0 10px;
}
.quiz-p {
  text-align: justify;
  white-space: normal;
  vertical-align: middle;
  margin: 0 96px 0 0;
}

方法四

.quiz {
  padding-left: 71px;
  position: relative;
}
.quiz-h {
  left: 0;
  top: 0;
  bottom: 0;
  margin:auto 10px;
  height: 0;
  line-height: 0;
}
.quiz-p {
  text-align: justify;
  margin: 0 10px;
}

优秀回答 | 获赞回答 | 高分回答

总结：

1. 没考虑到文字很少的情况；
2. inlinle-block实现，自己其实不是很会；
3. 方法很多要多向大家学习！

> 代码补全测试 <

[JaimeCheng]

zxx: 本期要点

1. 明年小测还是有的，只是不打分了，也不直播答疑了，大家自己作答，看看别人的回答，我自己额外也会点评点评。
2. 第一题只有1个人回答完全OK。display: table需要设置宽度100%，以及第一个单元格的尺寸，这个实现啰嗦。这一题的答案比大家想的要简单，.quiz-p {display: table-cell;} 就结束了。（匿名表格特性）
3. flex实现。align-items: center方法之一，还可以直接控制子项的margin，.quiz-h { margin: auto 0; }
4. inlinle-block实现，大家基本上都是white-space: nowrap实现的，有位小伙伴稍微有点区别，就是.quiz-h宽度0. 还可以使用margin负值实现（参考录播视频）。
5. absolute定位实现，top:50% - 1/2 自身高度（IE6+支持），还有定高+top:0; bottom: 0; margin:auto（IE8+）。
6. calc()计算还是transform定位，这些 IE8都不支持，IE9+支持。