填充會導致div擴展到父級以外

任何想法.story文本擴展超出容器邊界的任何想法？我不想設置overflow：hidden，因爲它不能解決填充引起擴展超出邊界的問題（並且文本將向容器的右邊緣刷新）。爲什麼文本文本不在其父文件的範圍內，我如何才能使其正確行爲？填充會導致div擴展到父級以外

小提琴：http://jsfiddle.net/csaltyj/yFpMH/

HTML：

<div id="story-container"> 
    <div class="story"> 
     <img src="http://www.westernjournalism.com/wp-content/uploads/2011/04/Barack-Obama-There-Might-Be-Chances-of-Further-Offshore-Drilling-Campaigns.jpg" /> 
     <div class="story-text"> 
      <h4>Obama is pointing at you!</h4> 
      <p>It is this very gaze, and this very pointed finger, that actually killed Osama bin Laden.</p> 
     </div> 
    </div> 
    <div class="story"> 
     <img src="http://reason.com/assets/mc/jtaylor/rahm.jpg" /> 
    </div> 
</div>

CSS：

#story-container { 
    margin-top: 2em; 
    width: 300px; 
    height: 200px; 
    border: 1px solid #999; 
    position: relative; 
} 

.story { 
    position: absolute; 
} 

.story img { 
    width: 100%; 
    height: 100%; 
} 

.story-text { 
    background: rgba(0, 0, 0, 0.7); 
    color: #fff; 
    position: absolute; 
    /*top: 130px;*/ 
    bottom: 0; 
    height: 45px; 
    width: 100%; 
    padding: 10px; 
} 

.story p { 
    font-size: 0.7em; 
}

來源

2011-05-09 CaptSaltyJack

設置故事文本的寬度爲280px或者只是容器寬度 - 填充左邊填充右邊。這裏的演示http://jsfiddle.net/yFpMH/6/

來源

2011-05-09 20:55:59 raeq

如果你把爲應該修復它.story文本的寬度聲明。

來源

2011-05-09 20:54:35

這很有效，但如果文本很短，故事文本將不會延伸到整個過程 – CaptSaltyJack 2011-05-09 20:55:50

@CaptSaltyJack，如果您將寬度設置爲需要減去的「故事文本」類從它填充 – raeq 2011-05-09 20:57:02

是的，如果文本將不會包裝，然後使用@mirza下面發佈的答案，只需聲明確切的大小而不用計算填充。否則，你不需要聲明寬度。 – 2011-05-09 21:00:24

填充會導致div擴展到父級以外

回答

相關問題