13

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;

}​
4

4 に答える 4

24

デモ

私はこれがあなたが必要とするものだと思いますか？divを設定する必要があり、divを位置に設定する必要があるtwo div's場合はいつでも。insidefirstrelativeotherabsolute

于 2012-04-14T15:40:23.920 に答える
9

これは、絶対位置を使用しているためです。オーバーフローを非表示にして絶対位置を使用することはできません。これは、絶対位置を使用すると、対象となる要素がドキュメント構造のコンテキストから外れるためです。

于 2012-04-14T15:35:25.120 に答える
2

実際には機能しています。あなたが与えたパディングとそのコンテンツは、overflow:hidden;

私の要点を確認するには、このデモoverflow:hiddenを参照してください。高さを減らしましたが、機能しています。

于 2012-04-14T15:41:39.863 に答える
1

要素に絶対位置を指定すると、div の境界の外に配置することもできます。したがって、隠されたオーバーフローが要素に影響を与えることはありません。

于 2012-04-14T15:36:30.320 に答える