Question

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

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 {

Answer 1

如果您使用浮动而不是绝对位置，这将做您想要的;你的形象也不应该在身体之外。

请参阅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;

}

Answer 2

你可以试试这个：

.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”

即可

获取内容以清除响应式图像

2 个答案: