研究table-cell和overflow

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{

width:200px;
height: 200px;
border:1px solid red;
overflow:auto;

}

.testTable-cell{

display:table-cell;
border:1px solid red;
padding:10px;
vertical-align:middle;
width:3000px;

}

.testTable-cell div{

display:inline-block;

}

.first{

width:100px;
}

.one{

width: 100px;
background: red;

}

.two{

width: 200px;
background: blue;

}

.three{

width:300px;
background: orange;

}

</style>
</head>
<body>

<!-- overflow scoll 只要设置就会出现滚动条
而设置auto只有内容超出父元素才会出现滚动条
-->

<!-- 研究display:table-cell -->
<!-- 设置之后 会默认的创建一个tr table 来包裹它
为了让它成为真正的td
所以它这样设置完以后具有td的特性
等高 自适应宽度

可以利用vertical-align:middle 实现垂直居中

还可以实现
左定宽 右自适应宽度
但是 右边的父元素宽度要设置一个大值 为了当子元素
宽度太大 也会自适应
-->
<div class="box">

帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

</div>

<div class="testTable-cell first">

帅哥帅哥帅哥帅哥帅哥<br>
帅哥帅哥帅哥帅哥帅哥<br>
帅哥帅哥帅哥帅哥帅哥<br>
帅哥帅哥帅哥帅哥帅哥<br>

</div>

<div class="testTable-cell">

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</div>

<script>

</script>
</body>
</html>