在调整行大小时对齐列

Question

我有两页，一页是用 div 和 CSS 制作的，一页是用臭名昭著的 table 制作的。

The CSS Page...

...and the Table page.

乍一看，它们非常相似。两者都有一个 2x2 的圆形“按钮”网格，它们会根据它们周围的窗口调整大小。

现在，把它放在手机的上下文中。没错，缩小结果框（水平方向，不用担心垂直方向）。

最初，我只有 CSS 版本，但是有特定的浏览器宽度，其中左侧的文本下降到两行，而右侧的文本保持在一行，因为字符串的长度不同。碰巧的是，对于实际的字符串，大多数电话分辨率都会导致这种烦人的情况发生。

但是，可以预见，该表会按照我想要的方式运行。该表具有“行”和“列”的概念，因此列保持对齐，并且一行中的单元格变得更高，其余的也是如此。

有没有办法在 CSS 中模仿这种行为？我经常被告知表格在可访问性等方面有多糟糕。我喜欢将<table> 保留为实际的数据表格，而不是布局。

我知道相邻选择器，但我找不到办法说“使您的最小高度与我的高度相同，反之亦然”。

另外，显然这可以通过脚本来完成。但是除非这里有人对这个问题有热情的感觉，javascript > CSS && javascript > Table，否则让我们坚持使用 CSS。

Answer 1

今天每个理智的浏览器都应该支持display: table/table-row/table-cell/... 属性，它将您的 div 转换为一个漂亮的表格，但不接触 html 标记。

这是您转换后的代码：

http://jsfiddle.net/eU6Xe/5/

HTML：

<div id="main">
    <div class="row">
        <div class="button">
            Some text here
        </div>

        <div class="button">
            And more text here
        </div>
    </div>

    <div class="row">
        <div class="button">
            More Text
        </div>

        <div class="button">
            Lots of text here
        </div>
    </div>
</div>

​CSS：

div #main {
    display: table;
    width: 100%;
}

div.row {
    display: table-row;
}

div.button {
    display: table-cell;
}

​

Answer 2

说实话，这两个版本都无法访问，而且使用起来同样烦人。

首先：您为什么不使用<button>s 或<input type="button">？

这两个演示在语义上都不正确。除了保存数据之外，表并不意味着做任何事情。应该使用一个按钮来提交/取消/清除表格。 <div> 是你放在垃圾抽屉里的whatchamacallit，你在万不得已时使用。

表格法

没有办法使表格可访问。它将始终被视为一张表，但由于使用不正确，因此需要使用presentation 的WAI-ARIA 角色。然而，这将告诉辅助技术忽略它是一个表格的事实，从而将单词组合在一起。使单元格可点击的唯一方法是通过 onClick，它可能会根据 AT 和您构建 onClick 的方式自动触发。因此不允许人越过它，因为他们不知道这是一张桌子，所以他们不能跳过它。

CSS 方法

首先，<h2> 元素使用不正确。 <h2> 用于表示页面的部分，它们构成页面层次结构，按钮成为层次结构的一部分几乎没有意义。接下来，<div> 默认不接收焦点。第三，如果您将 onClick 附加到 <div>，您会遇到与上述相同的问题。

使用 ARIA，您可以使 <div>s 像按钮一样，但您的代码变为：

<div class="left-col">
 <div class="button" tabindex="-1" role="button">
  Some text here
 </div>
 <div class="button" tabindex="-1" role="button">
  And more text here
 </div>
</div>

或

<input type="button" value="some text here" />