Html 浮动div对齐问题

我有这个布局，我有两个分区，主要内容和外部内容。应该有一个漂浮在一起的地方。但是，当我有一个以上的课外节目时，出于某种原因，它会沿着主要内容往下滑。你能帮我修一下吗

我提供了一把js小提琴

HTML

---

问题是div总是水平浮动，而不是垂直浮动。这里要做的是垂直浮动

.extracontent

s，同时保持水平关系。为此，请使用以下css将所有

.extracontent

div包装在一个.allextras`div中：

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

---

或者，您希望它以您想要的方式设置样式以获得边距。

根据CSS中的定义，您的#content的宽度为810px，您的.maincontent的宽度为506px，您的.extracontent的宽度为200px。如果您添加一个额外的.extracontent，则总共有906px。因此，它超越了810px并向下滑动。

我不太确定你想要实现什么

如果你想有两个额外的内容面板在一起，你必须扩大或缩小额外的和主要的内容。 为此，我建议您使用一些JQuery来确定.extracontent的数量，然后根据它更改宽度

最好的方法是将.extracontent放入一个静态宽度的容器中，然后执行以下操作： 将extracontent.width除以（父级中的extracontent.count）

---

您还可以将“内容”拉伸为最小宽度，而不是将宽度固定为1000

您的

#内容

围绕一个

#主内容

和两个

#附加内容

的宽度比所有内容的宽度都小。506+200+200+所有页边距>810px。给它更多的空间，你的div就不会下降到其他级别。

如果要向下滑动，我希望主内容div与第一个内容外div处于同一级别，如果你看JSFIDDLETworked，你会看到它的效果！非常感谢你，我以前试过这个，没有宽度，它变了哈哈

#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);
}

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