0

我有两页，一页用div's 和 CSS 制作，一页用臭名昭著的table.

CSS 页面...

...和表格页面。

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

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

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

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

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

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

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

4

2 回答 2

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;
}

​
于 2012-07-10T22:13:49.947 回答
0

老实说，这两个版本都无法访问，而且使用起来同样令人讨厌。

首先也是最重要的：你为什么不使用<button>s 或<input type="button">？

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

表法

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

CSS 方法

首先，<h2>元素使用不正确。<h2>是表示对页面层次结构有贡献的页面部分，按钮成为层次结构的一部分几乎没有意义。接下来， a<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" />
于 2012-07-11T13:05:33.010 回答