Question

知道为什么.story-text扩展超出容器的范围？我不想设置溢出：隐藏，因为它没有解决填充导致它扩展超出边界的问题（并且文本将冲洗到容器的右边缘）。为什么.story-text不在其父级的范围内，如何使其正常运行？

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;
}

Answer 1

如果你取出应该修复它的.story-text的宽度声明。

Answer 2

将故事文本的宽度设置为280px或仅设置容器宽度 - 左侧填充 - 填充右侧。在这里演示http://jsfiddle.net/yFpMH/6/

填充导致div扩展超出父级

2 个答案: