将div分开以获取表行为

Question

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

我的问题是，是否有可能只使用CSS实现上图中的输出？我玩过display:table，桌子等等，没有运气。

如果只用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

AS OP STATED：

  

我的问题是，是否有可能只用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

Answer 3

你在做什么......？我们有桌子是有原因的。最大限度地使用它，而不是一半。

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

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

Answer 4

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

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

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

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