布局列-等高

Question

我记得我第一次开始使用表格作为布局，并了解到我不应该这样做。我正在一个新的网站上工作，如果不使用表格，我似乎无法完成相同高度的列。下面是使用div标记进行尝试的一个示例。

<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div style="clear:both"></div>
</div>

现在我尝试做的是让列向左浮动，并将其宽度设置为33% (这很好)，我使用了清除:这两个div都是最大列的大小，但根据它们的内容大小，列将是不同的大小。我已经找到了许多修复，其中大部分涉及css黑客，只是让它看起来像它的权利，但这不是我想要的。我曾想过只在javascript中这样做，但对于那些选择禁用javascript的人来说，情况就不一样了。我能想到的唯一真正的方法就是使用表格，因为单元格在同一行中都有相同的高度。但我知道用桌子是不好的。在搜索完以后，我发现：http://intangiblestyle.com/lab/equal-height-columns-with-css/似乎与表完全一样，因为它只是设置它的显示与表完全一样。使用它和使用表格一样糟糕吗？我真的找不到我能做的事了。

编辑

@Su‘我看过“假栏”，不认为那是我想要的。我想我可以使用display:table方法为我的站点实现更好的设计。我发布这个问题是因为我不确定我是否应该这样做，因为我一直听说在网站布局中使用表格很糟糕。

Answer 1

不，使用display: table、display: table-row和display: table-cell不会像使用<table>标记那样糟糕。其原因是HTML是一种语义语言，这意味着所使用的标记应该描述内部的内容。在这种情况下，可以使用CSS向浏览器描述数据应该如何显示，而且由于您所追求的表示功能是表的功能，所以您可以直接这样做。

不过，我要提到的是它们在IE7或更低版本中不受支持。

您还可以在堆栈溢出上检查一些类似问题。

Answer 2

我建议您尝试使用列，如下所示，并使用媒体查询，以帮助避免显示列的窄屏幕，如果它们不能正常工作。它是为Chrome和Safari (-webkit)以及火狐(-moz)编写的。您可以根据需要更改列数和列间距。我觉得它很可靠。

@media only screen and ( min-width: 1200px ) { 
  .two-col {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
      -webkit-column-gap: 1.5rem;
         -moz-column-gap: 1.5rem;
              column-gap: 1.5rem
  }
}

另一个项目。例如，如果您需要在顶部对齐列，而不管其中一列是12行，另一列是11行，您也可以添加vertical-align: top。