HTML/CSS - Inner-Div 100％跨多列的高度？

我看了很多其他问题，但我认为我的问题有点不同，如果我错了，我很乐意看到链接并关闭此问题。HTML/CSS - Inner-Div 100％跨多列的高度？

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

第一小节右边框不走一路下来 - 我需要它，否则它看起来相当时髦。

我可以在jQuery中做到这一点，但我现在正在寻找一个纯HTML/CSS解决方案。

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

编辑

人造列不会起作用，因为它需要一个背景图像。列的数量可以更改为1-5，因此边界必须反映这一点。很容易在CSS中完成，但不能与背景图像完成。

来源

2010-06-22 Kerry Jones

这实际上是一个古老的问题可能不是在SO，但在CSS一般。有几种方法可以做到这一点。一种是通过使用背景图像 - 这将是艰难的，因为你有一个流体布局 - 如果你修正了列的宽度，你有这个问题将工作，或者你可以发送图像的位置使用百分比在这个案件33％。

两个可以围绕其他列包围一个div，所以你较短的列需要其他两个的高度 - 这是相当复杂的。

三 - 不用担心它的特点。关于这一点的事情是，如果你突然把它分类为一列，那么'客户'决定他们想在其他列中的其他列中减少内容，那么你也会遇到问题。

来源

2010-06-22 07:28:59 matpol

这将成为一个服务网站，内容将随时更新（不刷新），这就是为什么我正在寻找完全处理它的解决方案。到目前为止，它看起来不可能。 HTML不能在每列的基础上改变 - 通过jQuery手动调整高度更容易。谢谢你的建议！ – 2010-06-22 07:45:44

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

来源

2010-06-22 07:24:44 kschaper

在某些情况下，这是一个很好的解决方案，但是如果您看到我的编辑，它将无法跨越动态不同的列。 – 2010-06-22 07:44:12

另一种选择可能是显示：表

<!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/

来源

2010-06-22 07:41:14 kschaper

我认为这是一个很好的选择，尽管我们需要跨浏览器支持。另一件让这变得复杂的事情是，它几乎是一个禅宗花园布局 - 它可以轻松地从水平相邻的另一个垂直堆叠（如果它们有五个以上的子部分）。 – 2010-06-22 07:49:36

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

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