即使列高度不使用TABLE

有没有办法让两列在高度上相互匹配，而不使用表格单元格，固定高度或Javascript？即使列高度不使用TABLE

使用表

<table> 
    <tr> 
     <td style="background:#F00;"> 
      This is a column 
     </td> 
     <td style="background:#FF0;"> 
      This is a column<br /> 
      That isn't the same<br /> 
      height at the other<br /> 
      yet the background<br /> 
      still works 
     </td> 
    </tr> 
</table>

使用的DIV

<div style="float:left;background:#F00" > 
    This is a column 
</div> 
<div style="float:left;background:#FF0" > 
    This is a column<br /> 
    That isn't the same<br /> 
    height at the other<br /> 
    yet the background<br /> 
    still works 
</div> 
<div style="clear:both;" ></div>

的目标是使双方的背景，无论扩展全高哪一方较高。

将其中一个嵌套在另一个不起作用，因为它不能保证两边都是正确的高度。

不幸的是，预览显示了正常工作的HTML，但实际的文章已将其删除。你应该可以将它粘贴到一个HTML文件中，看看我的意思。

来源

2008-12-02 Hugoware

可能的重复[在双列页面上，如何使用CSS或Javascript将左侧div增长到与右侧div相同的高度？]（http://stackoverflow.com/questions/35699/on-一个两列的页面如何可以生长左边的高度相同的高度） – outis 2012-06-15 17:40:11

http://www.xs4all.nl/~peterned/examples/csslayout1.html

这是你想要的那种东西，给他们俩一个100％的高度（用这个CSS技巧），他们会伸展到包含div的高度！

编辑：忘了提，把它们放在一个容器div！

编辑：

<html> 
<head> 
    <style> 
     html, body 
     { 
      margin: 0; 
      padding: 0; 
      height: 100%; /* needed for container min-height */ 
     } 
     #container 
     { 
      background-color: #333333; 
      width: 500px; 
      height: auto !important; /* real browsers */ 
      height: 100%; /* IE6: treaded as min-height*/ 
      min-height: 100%; /* real browsers */ 
     } 
     #colOne, #colTwo 
     { 
      width: 250px; 
      float: left; 
      height: auto !important; /* real browsers */ 
      height: 100%; /* IE6: treaded as min-height*/ 
      min-height: 100%; /* real browsers */ 
     } 
     #colOne 
     { 
      background-color: #cccccc; 
     } 
     #colTwo 
     { 
      background-color: #f4f5f3; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="colOne"> 
      this is something</div> 
     <div id="colTwo"> 
      this is also something</div> 
     <div style="clear: both;"> 
     </div> 
    </div> 
</body> 
</html>

来源

2008-12-02 21:53:52 Tablet

我给。我一直在尝试，我不能让列彼此相邻，并且是相同的高度。我怎样才能做到这一点？ – MrChrister 2008-12-02 22:52:03

给我一分钟 – Tablet 2008-12-02 23:08:51

这对FireFox 2来说并不适用，但它在IE6中有效 - 什么给了？我正在使用它与XHTML 1.0 Transitional文档类型。 – 2008-12-03 08:53:52

-2

即使世界用聪明的HTML和CSS实现这一目标的一个简单的方法。

首先HTML：

<div id="container"> 
    <div id="col1"> 
     this is column 1 
    </div> 
    <div id="col2"> 
     this is column 2<br /> 
     it is obviously longer than the first column <br /> 
     YEP! 
    </div> 
</div>

请注意，缺乏明确的：既unsemantic股利。

现在的CSS：

#container { background:#f0f; overflow:hidden; width:400px; } 
#col1, #col2 { float:left; width:50%; } 
#col2 { background:#ff0; }

隐藏在容器规则的溢出可以确保容器扩展到包含浮动的div的大小（和摆脱了unsematic清算股利，每个人都这么喜欢）。

容器的背景适用于第一列。 col2 div的背景仅适用于第二个div。这就是我们的幻觉，两个div总是一样的高度。

3行CSS中的简单语义解决方案。享受

编辑：请评论投票的理由，否则我必须猜测为什么我的回答是错误的。在这种情况下，我忘了将宽度属性添加到容器，以便与IE6/7配合使用。请检查上面修改后的CSS。

来源

2008-12-02 23:32:11

display:inline-block

一招，它甚至在IE：

<div><span> 
    col1 
</span></div> 
<div><span> 
    col2 
</span></div> 

div {display:inline;} 
span {display:inline-block;}

来源

2008-12-02 23:57:51 Kornel

只是因为没有人的说这个，很多时候人们只是假偶数列的存在，由具有背景图像，它一直铺在外部容器的底部。

这表明内容是在两个相等的列中，即使一个在另一个之前结束。

来源

2008-12-03 04:01:51 AmbroseChapel

使用Faux ColumnCSS技术来解决这个问题。

考虑以下几点：

<div class="contentSidebarPair"> 
    <div class="sidebar"></div> 
    <div class="content"></div> 
</div>

您可以使用以下样式：

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar. 
    #FFF is the bgcolor of your content */ 
div.contentSidebarPair { 
    background: #FFF url('sidebar.gif') repeat-y top left; 
    width: 800px; 
    margin: 0 auto; /* center */ 
    zoom: 1; /* For IE */ 
} 

/* IE6 will not parse this but it doesn't need to */ 
div.contentSidebarPair:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

div.sidebar { 
    float: left; 
    width: 200px; 
} 

div.content { 
    float: left; 
    width: 600px; 
}

有！简单而有效。涉及JavaScript绝对零。如果你想创建更复杂的布局（液体布局），你可以使用背景位置来适应这种技术。 A tutorial is available here。

来源

2009-06-26 01:42:07

是的，这是可能的 - 纯粹的CSS和没有黑客 - equal height columns。

查看本文 - 这篇文章写得非常好。

来源

2009-08-07 08:19:09 zeroDivisible

如果您正在处理支持CSS2.1（IE8及更高版本，所有其他主流浏览器）的浏览器，这很简单。如果这是你的标记：

<div> 
    This is a column 
</div> 
<div> 
    This is a column<br /> 
    That isn't the same<br /> 
    height at the other<br /> 
    yet the background<br /> 
    still works 
</div>

这将是你的CSS：

div { display: table-cell; }

如果您在布局中需要多行，你将不得不在里面添加一些包装元素，但在其他方面this works straight off 。

来源

2011-07-11 14:29:37 robertc

即使列高度不使用TABLE

回答

相关问题