获取由 <td> 分隔的 div 以获取表格行为答案

【问题标题】：Get div's separated by <td> to get table behaviour获取由 <td> 分隔的 div 以获取表格行为
【发布时间】：2012-08-03 04:32:25
【问题描述】：

我有一个像这样的独特代码结构：http://jsfiddle.net/VqzeQ/。我想要实现的是这样的输出：

我的问题是，是否可以仅使用 CSS 实现如上图所示的输出？我玩过display:table、table-cell 等，但没有运气。

如果仅使用 CSS 是不可能的，您会建议我如何使用给定的代码结构来实现这一目标？

【问题讨论】：

为什么不能更改 HTML？
我不能，它是复杂应用程序的一部分
IMO，如果应用程序强烈地附加到 HTML，那么设计就很糟糕。
我不认为它可以做到，特别是在可变高度的情况下。咬紧牙关，将 HTML 更改为合理的内容。
@dreamexploded：您需要调整纯 css 表的标记。请参阅下面给出的答案。

标签： css css-tables tablerow

【解决方案1】：

如 OP 所述：

我的问题是，是否可以仅使用 css 实现如上图所示的输出？我玩过 display:table、table-cell 等，但没有运气。

是的，这是可能的，但您需要调整纯 CSS 表格的标记，如下所示；

HTML：

<div class="table-row">
    <div class="number table-cell">1</div>
    <div class="content table-cell">
        1111 11111 111 111 111 111 111 111 111 111 111 111 111 11 11 1111111 111111111111111 111 111 111 111 111 111 111 111 111 111 111 11 11 1111111 1111111111 11 11 1 11111 1 111111 1
    </div>
</div>

<div class="table-row">
    <div class="number table-cell">2</div>
    <div class="content table-cell">
        222 22222 222 222 22222 222 222 22222 222 222 22222 222 222 22222 222 222 22222 222 222 22222 222 222 22222 222 222 22222 222 222 22222 222         
    </div>
</div>

CSS：

.number, .content {border:1px solid #333;}
.table-row { display: table-row; }
.table-cell { display: table-cell }

SEE DEMO

【讨论】：

感谢@A.K 的解决方案。是的，如果没有可能的“仅css”解决方案，我会这样做:) 我进入生产过程的中间，所以更改代码结构是我必须做的最后一个选择，因为它会对应用程序的其他部分产生重大影响.
@dreamexploded ：如果你得到了解决方案，那就接受答案。
我认为 IE7 不支持 table-cell 或 table-row。不过我可能是错的。

【解决方案2】：

没有办法只用 css 做你想做的事。你可以试试js，像这样：

var numbers = $(".number");
var contents = $(".content");
for (var i = 0, l = numbers.length; i < l; i++)
  $(numbers[i]).height($(contents[i]).height());

但这也是一个糟糕的决定。

【讨论】：

【解决方案3】：

你在做什么……？我们有桌子是有原因的。充分利用它，而不是半途而废。

回答您的问题：不，不能用 CSS 做到这一点。您正在尝试根据另一个 div 的高度设置一个 div 的高度，它们之间的唯一关系是它们都是两个元素的第 n 个子元素。你能做的最好的就是给它们一个固定的高度，如this demo 所示。您不能仅使用 CSS 获得一个的高度并将其他的设置为该高度。

我可以写一个 JS 解释，但我不会，因为你应该使用表格来正确显示表格数据。

【讨论】：

我不能这样做，高度需要是自动的。我了解代码结构的弱点，但我处于生产过程的中间，因此更改代码结构是我必须做的最后选择，因为它会对应用程序的其他部分产生很大影响。

【解决方案4】：

如果您不介意所有行的高度相同，您可以在您的 css 中执行此操作：

.number, .content {border:1px solid #333;}
.number {float: left; position: relative; right: -8px;}
.content, .number {height: 55px;}

注意：这适用于 jsFiddle。我没有在浏览器中查看过

否则我认为您将进入 JavaScript 修复程序。

【讨论】：