3

我正在使用 display:table 创建嵌套的行和列集的布局。我注意到当表格单元格中的第一个元素不是文本时，列的对齐似乎会中断。诚然，我还没有测试过哪些元素会导致这种情况，但是这个 JSFiddle 中有一个例子：http: //jsfiddle.net/ekx4v/

代码：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  #container {
    width:200px;
    height:200px;
    display:table;
  }
  #column1 {
    display:table-cell;
    background-color:blue;
  }
  #column2 {
    display:table-cell;
    background-color:red;
  }
  </style>
</head>
<body>

<div id="container">
  <div id="column1">
    Col1
    <form>
      <select size="2">
        <option>Options go here...</option>
      </select>
    </form>
  </div>
  <div id="column2">Col2</div>
</div>

</body>
</html>

删除“Col1”文本会导致第二列不对齐。如果这在其他浏览器上无法重现，这里有一些屏幕截图，在 Chrome 中拍摄：

使用“Col1”：

正确对齐

没有“Col1”：

不正确的对齐

我在 Firefox 中得到相同的结果。这是预期的行为吗？如果是这样，是否有一种解决方法，以便我不必在每个 div 的开头放置文本？

4

2 回答 2

5

这完全是由于vertical-align默认为baseline，这是预期的行为，因为您的示例具有非常不同的字母基线。实际上，如果没有文本内容，div则没有字母基线，因此框的底部根据规范与父级的字母基线对齐。

值得庆幸的是，它很容易解决：

#container > div {
   vertical-align:top;
}

演示

这是一个相关的答案（检查最后一部分），尽管您的用例有点不同：

简单地说，当没有文本内容时，您的select元素将与父级的字母基线对齐。这会将父级的字母基线向下推，因此select仍然可以容纳在父级内部，其底部与父级的字母基线对齐。所有其他divs 的基线仍然与该基线对齐，该基线已被select.

通过在元素之前添加文本内容form，您div将拥有一个字母基线，它不会像那样推动父级的基线select。所有divs 的基线仍然与前一种情况一样与父级的字母基线对齐，但是这次父级的基线没有被推低。

这是上面2段的粗略演示（谨防疯狂的MS-Paint技能）：

在此处输入图像描述

如您所见，在第二种情况下，父元素的基线被向下推，因此select元素仍然可以容纳在父元素内部，同时其底部与父元素的基线对齐。

vertical-align:top使浏览器不必遵守如此复杂的规则。在将其应用于浮动/内联块/表格内容时，它还可以使我们免于许多麻烦。

于 2013-02-26T22:17:32.470 回答
0

你也可以使用

display:block;
float:left;
height: 200px;

在这两个细胞上。根据我的经验，允许 div 垂直对齐顶部以外的某个位置是使用table-cell. 如果您不需要它，可能会有更好的方法来做您想做的事情。将这些显示为块可以让您更好地控制文本在内部的显示方式。

于 2013-02-26T22:22:53.307 回答