css小测--两栏布局

 目标效果

这个题得分我是6分中国题是针对表格布局，flex布局，inline-block布局，absolute布局来完成，大家突然问题来了为什么没float，嗯，这个看个人习惯和场景应用，我是不这么喜欢用float布局的

HTML

  <div class="quiz">
    <h6 class="quiz-h">201912</h6>
    <p class="quiz-p">
      12月5日，由游戏行业头部媒体游戏陀螺、VR陀螺、陀螺电竞、陀螺财经主办的第四届金陀螺奖颁奖典礼于深圳举办。金陀螺奖是国内游戏业界中最为瞩目的游戏奖项之一，此次大会以“蝶变·向上的力量”为主题，聚焦游戏行业的未来趋势发展、行业创新升级、商业生态新连接等前沿领域，具有极高的代表性和权威性。此次颁奖典礼中，阅文集团根据IP定制改编手游《新斗罗大陆》荣获“年度人气IP类游戏奖”12月5日，由游戏行业头部媒体游戏陀螺、VR陀螺、陀螺电竞、陀螺财经主办的第四届金陀螺奖颁奖典礼于深圳举办。金陀螺奖是国内游戏业界中最为瞩目的游戏奖项之一，此次大会以“蝶变·向上的力量”为主题，聚焦游戏行业的未来趋势发展、行业创新升级、商业生态新连接等前沿领域，具有极高的代表性和权威性。此次颁奖典礼中，阅文集团根据IP定制改编手游《新斗罗大陆》荣获“年度人气IP类游戏奖”。。改编手游《新斗罗大陆》荣获“年度人气IP类游戏奖”12月5日，由游戏行业头部媒体游戏陀螺、VR陀螺、陀螺电竞、陀螺财经主办的第四届金陀螺奖颁奖典礼于深圳举办。金陀螺奖是国内游戏业界中最为瞩目的游戏奖项之一，此次大会以“蝶变·向上的力量”为主题，聚焦游戏行业的未来趋势发展、行业创新升级、商业生态新连接等前沿领域，具有极高的代表性和权威性。此次颁奖典礼中，阅文集团根据IP定制改编手游《新斗罗大陆》荣获“年度人气IP类游戏奖”。。
    </p>
  </div>

table布局

    .quiz {
      background-color: white;
      border: 1px solid #ddd;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .quiz-h {
      display: table-cell;
      font-size: 100%;
      vertical-align: middle;
      white-space: nowrap;
    }

    .quiz-p {
      color: gray;
      display: table-cell;
    }

display: table-cell：<td>标签的特性

vertical-align: middle：基线(X)中间

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

white-space: nowrap; 防止换行

这里不建议再.quiz上面加上dosplay:table,因为当文字少的时候不会宽度width：100%

Flex布局

    .quiz {
      background-color: white;
      border: 1px solid #ddd;
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      text-align: justify;
    }

    .quiz-h {
      margin: auto 0;
      font-size: 100%;

    }

    .quiz-p {
      color: gray;
      margin: 0 0 0 1em;
    }

注意：flex实现，.quiz-h:设置align-items: center是可以的，还可以直接控制子项的margin，.quiz-h { margin: auto 0; }，因为当设置了flex后就多栏同高了

inline-block布局

    .quiz {
      background-color: white;
      border: 1px solid #ddd;
      padding-top: 10px;
      padding-bottom: 10px;
      white-space: nowrap;
    }

    .quiz-h {
      font-size: 100%;
      max-width: 8em;
      margin: 0 .5em;
    }

    .quiz-p {
      color: gray;
      white-space: normal;
      vertical-align: middle;
      text-align: justify;
      padding-right: 9em;
    }

    .quiz-h,
    .quiz-p {
      display: inline-block;
    }

这里很巧妙：当quiz-h和quiz-p都设置为了行内元素的时候，他们就会同一行但是，一旦其中一块区域文字过多就会换行，但是一旦给quiz设置white-space: nowrap后他就不会换行了，这样quiz就会一行显示，记得给quiz-p设置回white-space: normal;

注意 还可以使用（目的就是：同一行显示）

1. quiz-p{width:0}的写法
2. 和设置quiz有padding那么quiz-h再设置负值

absolute布局

absolute定位实现，top:50% - 1/2 自身高度（IE6+支持），还有定高+top:0; bottom: 0; margin:auto（IE8+

    .quiz {
      background-color: white;
      border: 1px solid #ddd;
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;
    }

    .quiz-h {
      font-size: 100%;
      position: absolute;

      top: 0;
      left: 0px;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto;
      height: 1.5em;
      width: 8em;
      text-align: center;

      /* left: 10px;
      top: 50%;
      line-height: 1em;
      margin: -0.5em 0 0; */

      border: 1px solid seagreen;
    }

    .quiz-p {
      color: gray;
      margin-left: 8em;
    }