zhangxinxu commented 4 years ago

本期关于一个两栏垂直居中布局，局部内容自适应。

上图出现的代码补全地址是：http://quiz.xiliz.com/css-quiz16.html

每个方法2积分，每个方法都注意视觉还原效果，如果效果不佳会酌情扣分。

请附上对应的CSS代码，注意缩进和代码高亮（没有减1分），可以使用下面语法进行高亮：

```css
你的代码在这里
```

本期小测可以不提供在线demo，本期小测满分10积分，不要参考别人的回答，诚实守信。

由于本周有事，因此答疑改为12月28日，和下期JS小测一起，直播地址：https://live.bilibili.com/21193211

首位答题者会获得100%倍被翻牌技能，每位答题者都可获得2积分底分。

感谢您的参与！

ziven27 commented 4 years ago

第一题

.quiz {
   /* zxx: 宽度需要设置，不然内容少的时候会有问题 */
    display: table;
}
.quiz-h {
    vertical-align: middle;
    padding: 0 10px;
}

.quiz-p {
    text-align: justify;
    margin: 0 10px;
}

第二题

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

第三题

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

第四题

.quiz{
    position: relative;
    padding-left: 90px;
    min-height:24px;
}
.quiz-h {
    left: 10px;
    top: 50%;
    line-height: 1em;
    margin: -0.5em 0 0;
}
.quiz-p {
    margin: 0 10px 0 0;
    text-align: justify;
}

XboxYan commented 4 years ago

//zxx: .quiz-p的margin最好都重置下

方法1（IE8+）

.quiz {
    /* zxx: 这里要是去掉就好了 */
    display:table;
}
.quiz-h {
    vertical-align:middle;
    padding:0 10px;
}
.quiz-p {
    display:table-cell;
    text-align:justify;
    padding-right:10px;
}

方法2（IE10+）

.quiz {
    align-items:center
}
.quiz-h {
    padding:0 10px;
}
.quiz-p {
    text-align:justify;
    padding-right:10px;
}

方法3（IE8+）

.quiz {
    white-space:nowrap;
}
.quiz-h {
    vertical-align:middle;
    padding:0 10px;
}
.quiz-p {
    white-space:normal;
    vertical-align:middle;
    text-align:justify;
    padding-right:6em;
}

方法4（IE8+）

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

wingmeng commented 4 years ago

/* 方法1（IE8+） */
.quiz {
  display: table;
}
.quiz-h {
  padding: 0 10px;
  margin: 0;
  vertical-align: middle;
}
.quiz-p {
  margin: 0 5px;
}

/* 方法2（IE10+） */
.quiz {
  align-items: center;
}
.quiz-h {
  padding: 0 10px;
  margin: auto;
}
.quiz-p {
  flex: auto;
  margin: 0 5px;
}

/* 方法3（IE8+） */
.quiz {
  white-space: nowrap;
}
.quiz-h {
  margin: 0;
  padding: 0 10px;
  vertical-align: middle;
}
.quiz-p {
  margin: 0;
  margin-right: 90px;  /* .quiz-h 的宽度(79.2px)+ 间距(10px) */
  vertical-align: middle;
  white-space: normal;
}

/* 方法4（IE8+） */
.quiz {
  position: relative;
}
.quiz-h {
  top: 0;
  bottom: 0;
  height: 1.5em;
  margin: auto 10px;
}
.quiz-p {
  margin: 0 5px 0 80px;
}

livetune commented 4 years ago

3,4题想不出不用占位的方法

1.table

.quiz {
  display: table;
  padding-left: 0.8em;
  padding-right: 0.8em;
  text-align:justify;
}
.quiz-h {
  vertical-align: middle;
}
.quiz-p {
  margin: 0 0 0 1em;
}

2.flex

/* zxx: 赞一个 */
.quiz {
  padding-left: 0.8em;
  padding-right: 0.8em;
  text-align:justify;
}
.quiz-h {
  margin: auto 0;
}
.quiz-p {
  margin: 0 0 0 1em;
}

3.display:inline-block

/* zxx: 这个文字少的时候样式有问题，上下margin没有重置 */
.quiz {
  padding-left: 1.5em;
  padding-right: 0.3em;
  text-align:justify;
}
.quiz-h {
  width: 0;
  margin-left: -0.5em;
  vertical-align: -3px;
}
.quiz-p {
  margin: 0;
  vertical-align: middle;
  margin-left: 4.4em;
}

4. position: absolute

.quiz {
  position: relative;
  padding-left: 0.8em;
  padding-right: 0.8em;
  text-align:justify;
}
.quiz-h {
 height:1em;
 margin:auto 0;
 top:0;
 bottom:0;
}
.quiz-p {
  margin: 0 0 0 4.4em;
}

Seasonley commented 4 years ago

方法1

/* zxx: 需要设置宽度 */
.quiz{
  display:table;
  padding-right:.5em;
  padding-left:.5em;
}
.quiz-h {
  vertical-align:middle;
}
.quiz-p {
  display:table-cell;
  padding-left:1em;
}

方法2

.quiz{
  /* zxx: 可以不需要 */
  flex-flow:row;
}
.quiz-h {
  margin:auto .5em;
}
.quiz-p {
  margin:auto .5em;
}

方法3

.quiz{
  white-space: nowrap;
  padding:0 .5em;
}
.quiz-h {
  /* zxx:  单行文字时候，不对齐会比较明显 */
}
.quiz-p {
  vertical-align: middle;
  white-space: pre-wrap;
  padding:0 4em 0 1em;
}

方法4

.quiz{

}
.quiz-h {
  margin-left:.5em;
}
.quiz-p {
  margin:0 .5em 0 5.5em;
}

JaimeCheng commented 4 years ago

方法一

.quiz {
  display: table;
}
.quiz-h {
  vertical-align: middle;
  padding: 0 10px;
  margin: 0;
}
.quiz-p {
  text-align: justify;
  margin: 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;
}

les-lee commented 4 years ago

方法一


/* zxx: 盒模型需要变下，不然宽度超出了 */
.quiz {
  display: table;
  width: 100%;
  padding: 10px;
}
.quiz-h {
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px
}

.quiz-p {
  display: table-cell;
  vertical-align: middle;
}


- 方法二
```css
    .quiz {
      display: flex;
      align-items: center;
    }

    .quiz-h {
      padding-left: 10px;
      padding-right: 20px;
    }

    .quiz-p {
      flex: 1;
    }

方法三

/*zxx: calc IE8不支持*/
    .quiz {
      font-size: 0;
    }

    .quiz-h {
      vertical-align: middle;
      width: 50px;
      padding-right: 20px;
      padding-left: 10px;
      font-size: 16px
    }

    .quiz-p {
      width: calc(100% - 85px);
      vertical-align: middle;
      font-size: 16px;
    }

方法四

/*zxx: transform IE8不支持*/
    .quiz {
      position: relative;
    }

    .quiz-h {
      width: 50px;
      padding-right: 20px;
      padding-left: 10px;
      top: 50%;
      margin: 0;
      transform: translateY(-50%);
    }

    .quiz-p {
      margin-left: 80px;
    }

guqianfeng commented 4 years ago

方法1


.quiz-h {
display: table-cell;
}
.quiz {

display: table;

} .quiz-h {

vertical-align: middle; padding: 0 1rem;

} .quiz-p {

text-align: justify; padding-right: 1rem;

}

* 方法2
```css
.quiz {
  display: flex;
}
.quiz {

align-items: center;

}
.quiz-h {

padding: 0 1rem;

}
.quiz-p {

text-align: justify;
padding-right: 1rem;

}

方法3


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

white-space: nowrap;

} .quiz-h {

vertical-align: middle; padding: 0 1rem;

} .quiz-p {

white-space: normal; vertical-align: middle; text-align: justify; padding-right: 1rem; margin-right: 6rem;

}

* 方法4
```css
.quiz-h {
  position: absolute;
}
.quiz {

position: relative;

}
.quiz-h {

top: 0;
bottom: 0;
height: 1.5rem;
line-height: 1.5rem;
margin: auto;
padding: 0 1rem;

}
.quiz-p {

margin-left: 6rem;
text-align: justify;
padding-right: 1rem;

}

asyncguo commented 4 years ago

方法1（IE8+）

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

方法2（IE10+）

.quiz {
align-items: center;
}
.quiz-h {
padding: 0 8px 0 10px;
}
.quiz-p { 
padding: 0 10px 0 8px;
text-align: justify;
}

方法3（IE8+）

.quiz {
white-space: nowrap;
}
.quiz-h {
padding: 0 8px 0 10px;
vertical-align: middle;
}
.quiz-p { 
margin-right: 5em;
padding: 0 10px 0 8px;
white-space: normal;
vertical-align: middle;
text-align: justify;
}

方法4（IE8+）

.quiz {
position: relative;
}
.quiz-h {
top: 50%;
margin: -0.5em 0 0 0;
padding: 0 8px 0 10px;
line-height: 1em;
}
.quiz-p { 
margin-left: 5em;
text-align: justify;
padding: 0 10px 0 8px;
}

CMYK99 commented 4 years ago

方法1

.quiz{
display:table;
}
.quiz-h{
width:70px;
text-align:center;
vertical-align:middle;
}
.quiz-p{}

方法2

.quiz{
align-items:center;
}
.quiz-h{
width:70px;
text-align:center;
}
.quiz-p{
flex:1;
}

方法3

.quiz{
overflow:hidden;
letter-spacing:-3px;
white-space:nowrap;
box-sizing:border-box;
}
.quiz-h{
width:70px;
letter-spacing:0;
text-align:center;
}
.quiz-p{
letter-spacing:0;
margin-right:70px;
white-space:normal;
vertical-align:middle;
}

方法4

.quiz{
position:relative;
}
.quiz-h{
top:50%;
width:70px;
text-align:center;
margin-top:-.5em;
}
.quiz-p{
margin-left:70px;
}

zengqingxiao commented 4 years ago

// 第一题

    .quiz {
      display: table;
    }
    .quiz-h {
      display: table-cell;
      vertical-align: middle;
      min-width: 8em;
      text-align: center;
    }
    .quiz-p {
      display: table-cell;
    }

// 第二题

    .quiz {
      display: flex;
    }

    .quiz-h {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 8em;
    }

// 第三题

    .quiz {
      white-space: nowrap;
    }

    .quiz-h {
      max-width: 8em;
      margin: 0 .5em;
    }

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

// 第四题

    .quiz {
      position: relative;
    }

    .quiz-h {
      position: absolute;
      top: 0;
      left: 20px;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto;
      height: 1.5em;
      width: 8em;
    }

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

liyongleihf2006 commented 4 years ago

第一题

/* zxx: 还差改变盒模型，不然多了2px边框 */
.quiz{
    display: table;
    table-layout: fixed;
    width:100%;
}
.quiz-h{
    vertical-align: middle;
    width:5em;
    padding-left:10px
}
.quiz-p{
    display: table-cell;
    vertical-align: middle;
}

第二题

.quiz{
    justify-content: center;
    align-items: center;
}
.quiz-h{
    padding-left:10px;
    padding-right:10px;
}
.quiz-p{

}

第三题

/* zxx: 这个内容跑外面了吧 */
.quiz{
    white-space:nowrap;
}
.quiz-h{
    vertical-align:middle;
    width:5em;
    padding-left:10px;
}
.quiz-p{
    white-space:normal;
    vertical-align:middle;
}

第四题

.quiz {
    position: relative;
}
.quiz-h {
    top:0;
    bottom:0;
    line-height: 1em;
    height:1em;
    margin:auto;
    padding-left:10px;
    padding-right:10px;
    width:5em;
}
.quiz-p {
    margin-left:5em;
}

zy017 commented 4 years ago

第 1 题

.quiz { 
   /* zxx: 会导致边框样式丢失哦 */
    display: table-row;   
}
.quiz-h {
    vertical-align: middle;
    padding: 0 10px;
}
.quiz-p {
    vertical-align: middle;
    padding: 0 10px;
}

第 2 题

.quiz { 
    align-items: center;
}
.quiz-h {
    flex: none;
    padding: 0 10px;
}
.quiz-p {
    flex: 1;
    padding: 0 10px;
}

第 3 题

.quiz { 
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.quiz-h {
    vertical-align: middle;
    padding: 0 10px;
}
.quiz-p {
    vertical-align: middle;
    white-space: normal;
    padding: 0 90px 0 10px;
}

第 4 题

.quiz {
    position: relative;
}
.quiz-h {
    padding: 0 10px;
    top: 50%;
    margin-top: -0.5em;
    height: 1em;
    line-height: 1em;
}
.quiz-p {
    margin-left: 90px;
    padding-right: 10px;
}

rayj1993 commented 4 years ago

/* 第一题 */
.quiz {
    display: table;
}

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

.quiz-p {
    text-align: justify;
    padding-right: 10px;
}
/* 第二题 */
.quiz {
    align-items: center
}

.quiz-h {
    padding: 0 10px
}

.quiz-p {
    text-align: justify;
    padding-right: 10px;
}
/* 第三题 */
.quiz {
    white-space: nowrap;
}

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

.quiz-p {

    white-space: normal;
    vertical-align: middle;
    text-align: justify;
    padding-right: 100px;
}
/* 第四题 */
.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;
}

silverWolf818 commented 4 years ago

第一题

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

第二题

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

第三题

.quiz{
white-space: nowrap;
}
/* zxx: 默认margin还是要重置的  */
.quiz-h{
padding: 0 10px;
}
.quiz-p{
margin-right: 90px;
text-align: justify;
white-space: normal;
vertical-align: middle;
}

第四题

.quiz{
position: relative;
}
.quiz-h{
top: 50%;
line-height: 1;
margin: -0.5em 0 0 0;
padding: 0 10px;
}
.quiz-p{
margin-left: 70px;
padding: 0 10px;
text-align: justify;
}

Despair-lj commented 4 years ago

/* 1 */
.quiz {
  display: table;
  table-layout: fixed;
}
.quiz-h {
  padding: 10px;
  vertical-align: middle;
  letter-spacing: 1px;
}
.quiz-p {
  margin: 0;
  padding: 0 10px;
}

/* 2 */
.quiz {
  align-items: center;
}
.quiz-h {
  padding: 0 10px;
  letter-spacing: 1px;
}
.quiz-p {
  margin: 0;
  padding: 0 10px;
  flex: auto;
}

/* 3 */
.quiz {
}
.quiz-h {
  width: 12%;
  text-align: center;
  letter-spacing: 1px;
}
.quiz-p {
  margin: 0;
  width: 87%;
  vertical-align: middle;
}

/* 4 */
.quiz {
  position: relative;
}
.quiz-h {
  top: 0;
  bottom: 0;
  margin: auto 10px;
  height: 16px;
  line-height: 16px;
  letter-spacing: 1px;
}
.quiz-p {
  margin: 0;
  padding: 0 10px;
  border-left: 80px solid transparent;
}

NeilChen4698 commented 4 years ago

.quiz {
display: table;
}
.quiz-h {
vertical-align: middle;
}
.quiz-p {
}

.quiz {
align-items: center;
}
.quiz-h {
}
.quiz-p {
}

.quiz {
font-size: 0;
}
.quiz-h {
width:20%;
font-size: 14px;
vertical-align: middle;
}
.quiz-p {
width: 80%;
font-size: 14px;
vertical-align: middle;
}

.quiz {
position: relative;
}
.quiz-h {
width: 20%;
height: 2em;
line-height: 2em;
top: 50%;
margin-top: -1em;
}
.quiz-p {
margin-left: 20%;
}

GCGligoudan commented 4 years ago

方法1

/* 已有代码 */
.quiz-h {
  display: table-cell;
}
/* 补全代码 */
.quiz {
  display: table;
}
.quiz-h {
  vertical-align: middle;
  padding: 0 10px;
}
.quiz-p {
  display: table-cell;
  padding: 0 5px;
}

方法2

/* 已有代码 */
.quiz {
  display: flex;
}
/* 补全代码 */
.quiz {
  flex-direction: row;
  align-items: center;
}
.quiz-h {
  padding: 0 10px;
}
.quiz-p {
  padding: 0 5px;
}

方法3

/* 已有代码 */
.quiz-h,
.quiz-p {
  display: inline-block;
}
/* 补全代码 */
.quiz {
  flex-direction: row;
  align-items: center;
}
.quiz-h {
  width: 100px;
  float: left;
  line-height: 100%;
}
.quiz-p {
  width: calc(100% - 120px);
}

方法4

/* 已有代码 */
.quiz-h {
  position: absolute;
}
/* 补全代码 */
.quiz {
  flex-direction: row;
  align-items: center;
}
.quiz-h {
  top: 5%;
  left: 30px;
}
.quiz-p {
  padding-left: 100px;
}

juzhiqiang commented 4 years ago

/* 方法一*/
.quiz {
    display: table;
    padding-left:10px;
    padding-right:10px;
}
.quiz-h {
    vertical-align: middle;
    padding-right:20px
}
.quiz-p {
    margin:0;
    text-align:justify;
}

/* 方法二*/
.quiz {
    align-items:center;
}
.quiz-h {
    padding:0 10px;
    margin:0;
}
.quiz-p {
    margin:0;
    padding:0 10px;
    text-align:justify;
}

/* 方法三*/
.quiz {
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
    white-space:nowrap;
}
.quiz-h {
    margin:0;
    vertical-align: middle;
    padding-right:20px;
}
.quiz-p {
    white-space:normal;
    vertical-align: middle;
    text-align:justify; 
    margin:0;
    padding-right:88px;
}

/* 方法四*/
.quiz {
    position: relative;
}
.quiz-h {
    left:10px;
    top:50%;
    margin-top:-12px;
}
.quiz-p {
    margin:0 0 0 90px; 
    padding-right:10px;
    text-align:justify;
}

PorkDumplings commented 4 years ago

方法1（IE8+）

.quiz{
display:table;
}
.quiz-h {
display: table-cell;   /*已有代码*/
padding: 0 10px;
vertical-align: middle;
}
.quiz-p{
padding: 0 10px;
display: table-cell;
}

方法2（IE10+）

.quiz{
display: flex;   /*已有代码*/
align-items: center;
}
.quiz-h{
width: min-content;
padding: 0 10px;
}
.quiz-p{
padding: 0 10px;
}

方法3（IE8+）

/* zxx: 我怎么测试下来是个错位呢？ */
.quiz-h,
.quiz-p {
display: inline-block;   /*已有代码*/
}
.quiz-h{
margin-right: -10em;
margin-left: 2em;
}
.quiz-p{
margin-left: 8em;
margin-right: -2em;
vertical-align: middle;
text-align: justify;
}

方法4（IE8+）

.quiz{
position: relative; 
font-size: 62.5%;
}
.quiz-h {
font-size: 1.6em;
margin: 0 1em;
position: absolute;   /*已有代码*/
top: 50%;
transform: translateY(-50%);
}
.quiz-p{
font-size: 1.6em;
padding-left: 6.4em;
padding-right: 1em;
}

towavephone commented 4 years ago

方法一：

.quiz {
  display: table;
}

.quiz-h {
  vertical-align: middle;
  text-align: center;
  padding: 0 26px;
}

.quiz-p {

}

方法二：

.quiz {
  align-items: center;
}

.quiz-h {
  padding: 0 26px;
}

.quiz-p {
  flex: 1;
}

方法三：

.quiz {
  word-spacing: -1em;
}

.quiz-h {
  vertical-align: middle;
  text-align: center;
  width: 120px;
}

.quiz-p {
  vertical-align: middle;
  width: calc(100% - 120px);
}

方法四：

.quiz {
  position: relative;
}

.quiz-h {
  text-align: center;
  display: inline-block;
  width: 120px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.quiz-p {
  width: calc(100% - 120px);
  margin-left: 120px;
}

sghweb commented 4 years ago

第一题

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

第二题

.quiz-h{
  display:flex;
  align-items:center;
  padding-left:10px;
  padding-right:10px;
}
.quiz-p{
  padding-left:10px; 
  padding-right:10px;
}

第三题

.quiz{
  white-space:nowrap;
}
.quiz-h{
  vertical-align:middle;
  margin:0 20px 0 10px;
}
.quiz-p{
  vertical-align:middle;
  white-space:normal;
  margin-right:105px;
}

第四题

.quiz{
  position:relative;
}
.quiz-p{
  margin-left:95px;
  margin-right:10px;
}
.quiz-h{
  padding-left:10px;
  top:50%;
  margin-top:-0.5em;
}

xingorg1 commented 4 years ago

第1种：

/*zxx: 还好遇到你*/
.quiz {}

.quiz-h {
  display: table-cell; /* 已有代码 */
  vertical-align: middle;
  padding: 0 10px;
}

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

第2种：

.quiz {
  display: flex; /* 已有代码 */
  align-items: center;
  justify-content: center;
}

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

.quiz-p {
  padding-right: 10px;
}

第3种：

.quiz {
  white-space: nowrap;
  overflow: hidden;
}

.quiz-h {
  display: inline-block; /* 已有代码 */
  padding: 0 10px;
}

.quiz-p {
  display: inline-block; /* 已有代码 */
  white-space: normal;
  vertical-align: bottom;
  margin-right: 90px;
}

第4种：

.quiz {
  position: relative;
}

.quiz-h {
  position: absolute; /* 已有代码 */
  left: 10px;
}

.quiz-p {
  padding-right: 10px;
  padding-left: 80px;
}

lifelikejuly commented 4 years ago

第一题
```
.quiz {
display: table;
}
```

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

* 第二题
```CSS
.quiz {
 display: flex;
align-items:center;
}
.quiz-h {
padding: 0px 15px;
}
.quiz-p {
text-align: justify;
}

第三题


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

.quiz { white-space:nowrap; }

.quiz-h { padding:0 15px; }

.quiz-p { white-space:normal; vertical-align:middle; text-align:justify; }

* 第四题
```CSS
.quiz-h {
  position: absolute;
}

.quiz {
  position: relative;
}

.quiz-h {
 top: 50%;
 margin: 0;
margin-left: 10px;
 transform: translateY(-50%);
}
.quiz-p {
 text-align:justify;
margin-left:90px;
}

zhangxinxu commented 4 years ago

本期要点：

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

zhangxinxu / quiz

CSS基础测试16 #57

第一题

第二题

第三题

第四题

方法1（IE8+）

方法2（IE10+）

方法3（IE8+）

方法4（IE8+）

1.table

2.flex

3.display:inline-block

4. position: absolute

第一题

第二题

第三题

第四题

第 1 题

第 2 题

第 3 题

第 4 题

第一题

第二题

第三题

第四题