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;
    }

這裏不建議再.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實現。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;
    }

注意 還可以使用

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;
    }