Question

我的（WP）网站上有一个双列解决方案，当缩小我应用的this solution浏览器宽度时，有两个解决方案。

除了主容器中的内容被推下之外，它工作正常。如果我漂浮：离开两个容器而不会发生这种情况，但是我需要这样的解决方案来使正确的容器填充宽度。

我试图将正确的容器设置为position：relative和右侧容器中的title（h3标签）到position：absolute。这会将内容推到顶端，但会产生其他问题。

为什么会发生这种情况以及如何解决？

______________________________
||     ||                   ||
|| SB  ||                   ||
||     ||                   ||
||     ||                   ||
||     || Title             ||
||     || Foo text          ||
||     ||                   ||
||     ||                   ||
------------------------------

HTML：

<div id="main">
    <div id="sub-menu">
        //content
    </div>
    <div id="post-24" class="post post-add">
        //content
    </div>
</div>

的CSS：

#main {
    padding-left: 5px;
    margin-left: 22px;
    margin-top: 28px;
    padding-right: 30px;
    height: 100%;
}

#sub-menu {
    float: left;
    padding: 20px 30px;
    width: 220px;
    height: 400px;
    margin-right: 30px;
    border-radius: 3px;
}

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    margin-left: 320px;
}

Answer 1

浮动您的主要内容left，并使其成为width =XXpx。尝试解决您的问题。让我们知道它是怎么回事。

编辑：如果你仔细观察，你的文字不会放在底部，而是放在你左边内容底部的假想线之后。因此，在左侧内容停止的地方，这是您正确的内容开始的地方，那是因为上述问题。所以只需浮动：离开你的主要内容，看看会发生什么。

Answer 2

尝试将.post更改为：

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    float: left;
    }

你将失去你的宽度，但该项目将不再被推下。然后，您可以根据需要定义宽度。

div中的内容被推倒

2 个答案: