我在 ul li 中有一个包含文本和图像以及文本详细信息的 div，下面是 html 结构。我已将溢出隐藏应用到 .sbox 类，但它似乎不起作用，并且文本详细信息似乎没有被隐藏和溢出。
JSFiddle - http://jsfiddle.net/SAN6n/
HTML
<div id="content" class="contentList">
<ul id="slist" class="storyList">
<li>
<div id="storyBox1" class="sbox">
<div class="boxContent" >
<span class="overlay"><h5>Picture1 </h5></span>
<div class="txtOverlay"><h3>This is spring and weather looks good ...</h3</div>
<span><img src="http://img13.imageshack.us/img13/38/picture11tp.jpg"/></span>
</div>
</div>
</li>
</ul>
</div>
CSS
.storyList {
width:100%;
height:100%;
}
.sbox {
float:left;
width:300px;
height:150px;
padding: 5px 7px 8px 5px;
margin-top:20px;
margin-right:40px;
background:white;
border:1px solid #DDD;
<!--border radius-->
-webkit-border-radius: 3px;
-moz-border-radius: 2px;
border-radius: 3px;
overflow: hidden;
}
.boxContent {
width:100%;
height:100%;
border: 1px solid #777;
}
.storyList li {
list-style:none;
}
.overlay {
float:left;
opacity: .7;
background: #000;
height: 40px;
width: 300px;
position: absolute;
}
h5{
float:left;
margin-top:0px;
padding:0 0 0 5px;
font-family: Tahoma;
letter-spacing: 0.5px;
font-size:30px;
color: white;
}
.txtOverlay {
opacity: .7;
background: #000;
height: 110px;
width: 300px;
position: absolute;
margin-top:150px;
z-index:1;
font-weight:bold;
float:left;
font-family: OpenSansRegular;
letter-spacing: 0.5px;
font-size:10px;
color: white;
}