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

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

新手问题：

（1）如你所见，我试图让左边的列（ID =“column_bottom”）有一个白色（＃f5f5f5）背景与黑色文本，右列（ id =“content_bottom”）与黑色背景与白色（＃f5f5f5）文本，但一方总是凌驾另一方。我能做些什么来使它成为我想要的？（2）另外，你可以在CSS中看到我已经为body定义了字体和背景颜色，但不知怎的，这并没有实现，我该怎么办？

谢谢！

P.S.我正在寻找一个纯粹的HTML/CSS解决方案，并且不希望使用JavaScript。

来源

2011-02-17 hpy

你很近。在你的代码，只需改变你的造型，以列本身，就像这样：

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

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

来源

2011-02-17 22:09:52 TNC

现场演示我刚刚完成：http://jsbin.com/anota5/3（它做同样的事情） – thirtydot 2011-02-17 22:10:31

下面的代码将创建两个箱子并排侧和容器将始终包裹的盒子，不管他们有多高。这应该解决你的问题，有相同的高度的列。

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 }

来源

2011-02-17 22:11:14 Mauro

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

回答

相关问题