(1)解决子元素浮动,父元素设置overflow:hidden后子元素超出部分隐藏的办法
子元素浮动,父元素设置overflow:hidden,爷爷元素设置position:relative.子元素超出的部分就不会隐藏啦。
看代码:
<!doctype html>
<html>
<head>
<style>
.wrapper{
width:300px;
height:300px;
background:maroon;
margin:200px auto;
position:relative;
top:0;
left:0;
}
.child{
width:300px;
height:100px;
background:blue;
overflow:hidden;
}
.smallest{
width:99px;
border-right:1px solid #ccc;
height:100px;
float:left;
background:yellow;
}
.small_child{
position:absolute;
top:100px;
left:0;
width:200px;
height:100px;
background:pink;
z-index:999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="child">
<div class="smallest">
<div class="small_child">
</div>
</div>
<div class="smallest">
</div>
<div class="smallest">
</div>
</div>
</div>
</body>
</html>
效果图如下:
(2)解决div里面包一个img元素,div元素的高度总是比img元素高度多4px,给img元素设置vertical-align:middle就可以去掉多余的4px高。