我有两页，一张是用div和CSS制作的，另一张是用臭名昭著的table制作的。
The CSS Page...
...and the Table page.
乍一看，它们非常相似。两者都带有一个2x2的圆形“按钮”网格，它们根据周围的窗口调整大小。
现在，将其放在手机中。是的，缩小结果框架（水平，不用担心垂直方向）。
最初，我只有CSS版本，但是有特定的浏览器宽度，其中字符串的长度不同，因此左侧的文本会下降到两行，而右侧的文本将保持为一行。碰巧的是，使用实际的字符串，大多数电话分辨率都会导致这种烦人的情况发生。
但是，该表可以预期地以我想要的方式运行。该表具有“行”和“列”的概念，因此列保持对齐，并且一行中的单元格越来越高时，其余所有单元也一样。
有没有办法模仿CSS中的这种行为？我经常被告知坏表对可访问性的影响等等。而且我很喜欢将<table>保留为实际的数据表，而不是布局。
我知道相邻选择器，但是我找不到办法说“使您的最小高度与我的高度相同，反之亦然”。
而且，显然，这可以通过脚本来完成。但是，除非这里的人满怀激情地认为javascript > CSS && javascript > Table是这个问题，否则我们还是要坚持使用CSS。
最佳答案
如今，每个理智的浏览器都应支持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;
}
关于html - 在调整行大小时对齐列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11422720/