关于CSS中overflow属性导致排版错乱的问题
我在练习过程中发现，在使用overflow属性时，出现了排版错误，当把该属性注释掉后排版就好了，求指教。
这个是未加overflow的
这个是加了overflow的，不知道为什么，它自己跑上来半截。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用display：inline-block实现网格铺满浏览器</title>
<style type="text/css">
*{
margin: 0 aoto;padding: 0;
}
[class^=box]{
display: inline-block;/*转化为行内块*/
width: 200px;
height: 100px;
margin: 1em;
border: 2px solid #000;
border-bottom: 1px dashed #333;
}
.box1{
border: 2px dashed;
border-color: red yellow blue green;
overflow:auto;
}
.box2{
border-right: none;
}
.box3{
border-right-color: #b3b3b3;
}
.tip{
border: 1px solid #f55;
}
</style>
</head>
<body>
<div>
<p>我是一个行内块</p>
</div>
<div>
<p>我是一个行内块</p>
</div>
<div>
<p>我是一个行内块</p>
</div>
<div>
<p>我是一个行内块</p>
</div>
<div>
<p>我是一个行内块</p>
</div>
<div>
<p>我可没用清除浮动</p>
</div>
</body>
</html>
小钊钊浏览 3465回答 2
2回答
-
echo_kinchao
vertical-align:top就好了
随时随地看视频慕课网APP
Html/CSS