Question

我有这个布局，我有这两个div，maincontent和extracontent。应该漂浮在彼此旁边。但是当我有一个以上的额外内容div时，它会因某种原因滑下主要内容。你可以帮我解决一下吗？

HTML

<div id="container">
    <div id="content">

        <div class="extracontent">
            <h1>Other header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
        </div>
        <div class="extracontent">
            <h1>Other header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
        </div>

        <div class="maincontent">
            <h1>Some header text</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
        </div>

    </div>
</div>

CSS

#container {
    width:1000px;
    margin:0 auto;
    padding:20px 0;
    text-align:left;
}
#content {
    margin-left:10px;
    float:left; /* lines up the left #content and the right #sidebar div's beside   eachother */
    width:810px;
}
.maincontent {
    float:left;
    margin:10px 10px 10px 0; /* double the right side because left has 0 */
    padding:0 20px;
    width:506px;
    color:rgb(50,50,50);
    background:rgb(255,255,255);
}
.extracontent {
    clear:left;
    float:left;
    margin:10px 10px 10px 0; /* double the right side because left has 0 */
    padding:0 20px;
    width:200px;
    height:200px;
    color:rgb(50,50,50);
    background:rgb(255,255,255);
}

Answer 1

问题是div总是水平浮动而不是垂直浮动。你想要做的是垂直浮动.extracontent，同时保持水平关系。要执行此操作，请使用以下css将所有.extracontent div包装在'.allextras` div中：

.allextras { clear: left; float: left; width: 220px; }

或者你想要它的样式以获得你想要的边距。

Answer 2

根据您的CSS定义， #content 的宽度为810px， .maincontent 的宽度为506px， .extracontent 的宽度为200px 。如果您添加额外的 .extracontent ，则总计906px。所以它超过810px并向下滑动。

Answer 3

我不太确定你想要达到的目标。

如果您希望在彼此旁边放置两个额外的内容面板，则您要么必须扩大或缩小额外内容和主要内容。为此，我建议你使用一些JQuery来确定.extracontent的数量，然后根据它改变宽度。

最好的方法是将.extracontent放入具有静态宽度的容器中，然后执行以下操作：将extracontent.width除以（父母的额外内容）.count。

您还可以将#content拉伸到最小宽度，而不是将宽度固定为1000

Answer 4

#content周围的#maincontent和#extracontents的{{1}}宽度小于其他所有{{1}}。 506 + 200 + 200 +所有边距＆gt; 810像素。给它一些空间，你的div不会降到其他水平。

浮动div对齐问题

4 个答案: