填充会导致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扩展到父级以外

回答

相关问题