HTML布局问题

Question

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

inner1

• 两行。
• another_top1：固定宽度，固定高度
• 响应：固定宽度，可变高度

inner2

• 两行。
• another_top2：固定宽度，可变高度
• another_below：固定宽度，固定高度

问题：

当我尝试将inner1划分为两列时，如下所示，它可以正常工作。

1. inner1
2. inner1_2

---

我的inner2列another_top2数据，附在下面inner1_2以下。

---

CSS：

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

我该如何解决这个问题？

Answer 1

我觉得这个错误是由于左栏中的浮动比列更宽，导致右栏中的内容向下推。确保inner1_2的边距或填充不会使框比左列宽。

我还建议将＃inner2设为固定宽度，即至少两列的宽度。这样就可以确保两列适合。

另外，请检查您的doctype（http://www.alistapart.com/articles/doctype/）以确保您处于标准模式，或更正您在quirksmode时可能出现的框模型问题。

最后，您可以使用Firebug（https://addons.mozilla.org/en-US/firefox/addon/1843）或Xray（http://www.westciv.com/xray/）检查div的尺寸，然后查看它是否超出左列。