0

我在身体外部有一个响应图像，如下面的代码所示。它填满了屏幕的上半部分并且具有响应性，这很棒，但我希望下面的所有内容在调整大小时都留在图像下方，但没有任何效果 - 而不是清除它只是位于顶部的图像. 我可以尝试任何想法或替代方法吗？

的HTML：

</head>
<img src="/portfolio/images/me.jpg" class="ri">
<body>
    <header>
        <div class="contain">
            <a href="/"><img src="/portfolio/images/logo.png" alt="Logo" width="200" height="200"></a>
        </div>
    </header>
        <div class="contain">
            <nav>
                <ul>
                    <li><a href="/contact">Contact</a></li>
                    <li><a href="/work">Work</a></li>
                    <li><a href="/details">Details</a></li>
                </ul>
            </nav>
        </div>

CSS：

    .contain {
    width: 980px;
    margin: 0 auto;
}

img.ri {
    position: absolute;
    max-width: 100%;
    min-width: 980px;
    top: 0%;
    left: 0%;
    border-radius: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.9);
    z-index: -200;

}

        body {

    .lift {
    height: 80px;
    }

    header {
4

2 回答 2

0

如果您使用浮点数而不是绝对位置，这将满足您的要求；此外，你的形象真的不应该在身体之外。

有关示例，请参见http://jsfiddle.net/BnCQp/

代码是这样的

.contain {
    width: 980px;
    margin: 0 auto;
    float:left;
}

img.ri {
    float:left;
    max-width: 100%;
    min-width: 980px;
    top: 0%;
    left: 0%;
    border-radius: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.9);
    z-index: -200;

}
于 2013-05-02T18:04:48.953 回答
0

你可以尝试使用这个：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {
display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

只需在您的 img 标签中添加 clearfix 为 class="clearfix"

于 2013-05-02T18:10:58.237 回答