Question

我已经看了很多其他问题，但我认为我的问题有点不同，如果我错了，我会很高兴看到链接并关闭这个问题。

你可以在这里看到我的问题： http://www.phoenixdev.net/test.html

第一个小节的右边界不会一直向下 - 我需要它，否则它看起来很时髦。

我可以在jQuery中执行此操作，但我现在正在查看纯HTML / CSS解决方案。

这可能吗？如果是这样，怎么样？

修改

Faux Columns无法使用，因为它需要背景图像。列数可以更改为1-5，因此边框必须反映这一点。可以在CSS中轻松完成，但不能使用背景图像。

Answer 1

这实际上是一个古老的问题，也许不是在SO上，而是在CSS中。有几种方法可以做到。一种是使用背景图像 - 这将很难，因为你有一个流畅的布局 - 如果你修复列的宽度你有问题这将工作或你可以使用百分比在此发送图像的位置案例33％。

两个你可以在其他列周围包裹一个div，这样你的较短列就会占据另外两列的高度 - 这非常复杂。

三 - 不要担心它的特点。关于这一点的问题是，如果你突然对一列进行排序，那么'客户'决定他们想要在其他一列中减少内容，那么你也会遇到问题。

Answer 2

另一个选项可能是：table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>equal heights</title>
  <style type="text/css">
  #container
  {
    border:1px solid #000;
    display:table;
  }
  #container div
  {
    display:table-cell;
    width:200px;
    border:1px solid red;
  }
  </style>
<body>

<div id="container">
  <div>eins</div>
  <div>zwei<br />zwei<br />zwei<br /></div>
  <div>drei</div>
</div>

</body>
</html>

很遗憾，某些浏览器不支持它，请参阅http://reference.sitepoint.com/css/display或http://www.sitepoint.com/books/csswrong1/

Answer 3

我一直使用这种方法，它就像一个魅力： http://www.positioniseverything.net/articles/onetruelayout/equalheight

我在您的网站上使用Firebug尝试使用：

.content {

...

填充底：9999px;

边距：-9999px;

}

似乎解决了这个问题。让我知道它是否适合你。

Answer 4

我知道这不是最好的解决方案，但也许Faux Columns可能会有所帮助。见http://www.alistapart.com/articles/fauxcolumns/

HTML / CSS - 跨多个列的内部100％高度？

4 个答案: