display:table;を使った３段組のレイアウトについて

Question

<ul> <li class="1">テキスト</li> <li class="2">テキスト</li> <li class="2">テキスト</li> <li class="3">テキスト</li> </ul> のリストで、<ul>にdisplay:table;を、<li>にdisplay:table-cellを指定してclass="2"の<li>だけを横並びにして３段にしたいのですが、 table-cellをあてると全て横並びになってうまくいきません。 どのように指定すればよいのでしょうか？ よろしくお願いいたします。

下の図のようにしたいのです。

![イメージ説明]WIDTH:300

Answer 1

Flexboxを使って実装しました。
http://jsdo.it/penguinshunya/8z26

Safariでは、-webkit-ベンダープレフィックスが必要です。
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes

Comments

[purlcuit]

ご回答ありがとうございます。早速実装してみますので。

Answer 2

css の table-cell では、ご確認の通り横に配置するだけになります。
table-row 等の他の設定を組み合わせることによって、テーブル構造を表示することができます。

http://www.htmq.com/style/display.shtml

よくこういった配置について悩まれる方は、ブロック要素・インライン要素のことが理解していないことが多いです。。。が、ここではあえて説明は省かせて頂き、結論（手順）だけを簡単に。。。

1. ul タグに display:inline-block を指定（かつ、overflow:hidden 設定, 横幅（width）を指定するとモアベター）
2. li タグに display:inline-block を指定。かつ width: 100% を設定
3. 横馴べにしたい li に適当なクラス名を設定。（例：<li class="colCell">）
4. li.colCell の横幅を、並べたい要素の個数を元に設定 (３つ → 33% など）

→ ただ気を付けなければいけないのは、margin, padding 等の設定も確認する必要が有る。
→ 割り切れない場合は、疑似要素の導入も考える（li.colCel:first-child など）

Answer 3

完全ではありませんが、こんな感じではどうでしょう？
jsdo.it 上で作ってみました。
http://jsdo.it/katoy/wNhv

![イメージ説明]WIDTH:600

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ddf;
  font: 24px sans-serif;
}

ul {
    //display: table;
    width: 80%;
    margin: auto;
}

.data {
    display: table-cell;
    color: white;
    background-color: green;
    text-align: center;
    border: medium solid;
}

li:first-child {
    display: block;
    color: white;
    border-bottom: 0;
    background-color: red;    
}
li:last-child {
    display: block;
    color: white;
    background-color: red;  
    border-top: 0;
}

現状では ２段目の部分のセルの幅の制御ができていない。。。