css - 获取 div 的分隔符以获取表格行为

Question

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

我的问题是，是否有可能只用 CSS 实现像上图这样的输出？我玩过display:table, table-cell 等，但没有运气。

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

Answer 1

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

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

但这也是不好的决定。

Answer 2

正如操作所述：

我的问题是，是否可以仅使用 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 }

看演示

Answer 3

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

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

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

Answer 4

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

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

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

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