Question

我有一些CSS问题。我正在根据用户浏览器窗口的大小调整图像大小，但是当我这样做时，我的文本会通过图像。我可以通过给容器增加像素而不是自动来解决这个问题，但是在调整浏览器大小时看起来并不正确。

我在这里提出了一个简单的问题示例http://jsfiddle.net/34k2H/1/

<div id="coverContainer" style="position:relative; height:auto; width:100%;" class="center-block">
    <img class="photo center-block" src="https://www.google.co.uk/images/srpr/logo11w.png" />

</div>


<div class="center-block">
    <h2 style=" color:black;">
        Welcome to my website
    </h2>
    <div id="news">
        <h2 style="color:black;">News</h2>
        <p style="color:black;">Example Text Example Text Example Text Example Text Example Text Example Text Example Text Example Text Example Text .</p>
    </div>
</div>

CSS

.photo {
    box-shadow: 3px 3px 3px black;
    position:absolute;
    max-width: 100%; 
    height: auto;
}

我希望文字始终在图像下面。

任何帮助都会很棒。

由于

Answer 1

你的图片有position: absolute，我在jsfiddle中为你修好了。

http://jsfiddle.net/34k2H/2/

将文本定位在正在自动调整的图像下

1 个答案: