Question

我有两个页面，一个用div和CSS制作，一个用臭名昭着的table制作。

The CSS Page...

...and the Table page.

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

现在，把它放在手机的背景下。这是正确的，缩小结果框架（水平，不要担心垂直）。

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

但是，该表可以按照我希望的方式行事。该表具有“行”和“列”的概念，因此列保持对齐，并且当一行中的单元格变得更高时，所有其余的都是如此。

有没有办法在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>或<input type="button">？

这两个演示在语义上都不正确。除了保存数据之外，表并不意味着做任何事情。应使用按钮提交/取消/清除表格。一个<div>就是你在垃圾抽屉里保存的那个，你用作最后的手段。

表格方法

无法使表格可访问。它总是被视为一个表，但由于这被错误地使用，因此需要使用presentation <h2>角色。然而，这将告诉辅助技术忽略它是一个表的事实，从而将这些单词组合在一起。使单元格可单击的唯一方法是通过onClick，可以根据AT和构造onClick的方式自动触发。因此，不允许这个人通过它，因为他们不知道它是一张桌子，所以他们不能跳过它。

CSS方法

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

使用ARIA，您可以使<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" />

OR

{{1}}

在调整行大小时对齐列

2 个答案: