HTML 布局问题

Question

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

inner1

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

inner2

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

问题:

当我尝试将 inner1 分成两列时，效果很好。

1. 内部1
2. inner1_2

---

我的 inner2 列 another_top2 数据，附加在 inner1_2 结束下方 float 。

---

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

我感觉这个bug是左边栏的 float 比栏宽，​​把右边栏的内容往下推了。确保 inner1_2 的边距或填充不会使框宽于左列。

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

此外，检查您的文档类型 ( http://www.alistapart.com/articles/doctype/ ) 以确保您处于标准模式，或更正如果您处于 quirks 模式可能出现的框模型问题。

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