Question

我一直在使用示例here来设置具有相同高度的列的网页（仅使用HTML和CSS），并且它的工作相对较好。 Here是我正在使用的完整HTML和CSS代码。

新手问题：

（1）正如你所看到的，我试图让左栏（id =“column_bottom”）的背景为黑色（＃f5f5f5），背景为黑色，右栏（id =“content_bottom”）为黑色背景与白色（＃f5f5f5）文字，但一方总是凌驾于另一方。我能做些什么才能做到我想要的呢？

（2）另外，你可以在CSS中看到我为身体定义了字体和背景颜色，但不知何故没有进行，我该怎么办？

谢谢！

P.S。我正在寻找一个纯HTML / CSS解决方案，而不想使用javascript。

Answer 1

你很亲密。在您的代码中，只需将样式更改为列本身，如下所示：

#content_bottom {
    color: #f5f5f5;
    background:#000000; /* right column background colour */
}

#column_bottom {
    color: #000000;
    background:#f5f5f5; /* left column background colour */
}

Answer 2

下面的代码将并排创建两个盒子，容器将始终包裹这些盒子，无论它们有多高。这应该可以解决您拥有相同高度的列的问题。

html：

<div class="container">
    <div class="box">blah</div>
    <div class="box">blah<br/><br/>blah</div>
    <div class="clear"></div>
</div>

css：

.container { position:relative; width:100px; border:1px solid red; }
.box { position:relative; float:left; width:40px; border:1px solid blue; }
.clear { clear:both }

在CSS中创建相等高度列的问题

2 个答案: