HTML布局问题

我在HTML中划分多栏布局时遇到问题。我已将页面分为两列：

inner1

• 两排
• 另一个top1：固定宽度，固定高度
• 响应：固定宽度，可变高度

inner2

• 两排
• 另一个top2：固定宽度，可变高度
• 下面的另一个_：固定宽度，固定高度

问题是： 当我尝试将

inner1

划分为以下两列时，效果很好

内部1

内部1_2

---

我的

inner2

列

另一个\u top2

数据，附加在

inner1\u 2

下面的浮动数据结束

---

CSS:

---

如何修复此问题？

我觉得此错误是由于左列中的浮动比列宽，将右列中的内容向下推所致。确保inner1_2的边距或衬垫不会使框宽于左栏

我还建议将#inner2设置为固定宽度，即至少等于两列的宽度。这样，您可以确保两列匹配

此外，请检查doctype（）以确保您处于标准模式，或者更正在quirksmode中可能出现的框模型问题

---

最后，您可以使用Firebug（）或X射线（）检查div的尺寸，然后查看它是否超出左栏。

您能否澄清您在#inner_2中输入的两栏？我无法从您的代码示例中了解它们的位置、大小等。发生这种情况时，您会使用什么浏览器？inner1有两列，inner1或inner1&inner1_2。但是inner2只有一列，并且有两行，我使用mozilla和Chrome

#another_top1{
    width: 500px;
    height: 200px;
}

#another_top2 {
    float: right;
    display: inline;
    width: 350px;
    padding: 0 0 10px 10px;
    margin-bottom: 10px;
    color: #fff;
}

#outer{
    background-color: #FFFF99;
}

#inner1{
    float: left;
}

#inner1_2 {
    float: left;
    margin-top: 200px;
}
.twoColumn #inner1 { width: 62%; }
.twoColumn #inner1_2 { display: none; }
.threeColumn #inner1 { width: 41%; }
.threeColumn #inner1_2 { width: 21%; }

#inner2{
    float: right;
    width: 39%;
}