正文
研究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>
