html - 在调整行大小时对齐列

Question

我有两页，其中一页是用 div 制作的的和 CSS，一个是用臭名昭著的 table 制作的.

The CSS Page...

...and the Table page.

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

现在，将其放在手机的上下文中。没错，缩小结果框(水平方向，不用担心垂直方向)。

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

但是，该表可以预见地按我希望的方式运行。该表具有“行”和“列”的概念，因此列保持对齐，并且随着一行中的单元格变高，其余的也一样。

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

我知道 adjacent-selector，但我找不到“让你的最小高度与我的高度相同，反之亦然”的方法。

此外，显然这可以通过脚本来完成。但是除非这里有人对这个问题有强烈的感觉，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;
}

​