css - で区切られた 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

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 }

デモを見る

Answer 3

何してるの...？理由のためにテーブルがあります。途中ではなく、最大限に使用してください。

あなたの質問に答えるために：いいえ、CSSではそれを行うことはできません。あるdivの高さを別のdivの高さに基づいて設定しようとしていますが、それらの間の唯一の関係は、両方が2つの要素のn番目の子であるということです。あなたができる最善のことは、このデモに示されているように、両方に固定の高さを与えることです。CSSだけでは、1つの高さを取得して、他の高さをそれに設定することはできません。

JSの説明を書き出すことはできますが、表形式のデータを適切に表示するにはテーブルを使用する必要があるため、書きません。

Answer 4

すべての行が同じ高さであることを気にしない場合は、cssでこれを行うことができます。

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

注：これはjsFiddleで機能します。ブラウザでチェックしていません

それ以外の場合は、JavaScriptの修正に取り掛かると思います。