<!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>
更多专业前端知识，请上 【猿2048】www.mk2048.com
3716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
