固定幅と高さが整列した 'セル'のセットを作成

Question

私は基本的に互いに隣接し、定義された幅を持つブロックをしようとしています。しかし、私は、行の他の細胞と整列する細胞の高さを望みます。私は二つの方法を試してみた

http://codepen.io/thinkbonobo/pen/EKdxgP

.cm-table-frame {} 

.table-frame-row {} 

.table-frame-cell { 
    border: 1px solid lightskyblue; 
    /* display: table-cell; */ 
    display: inline-block; 
    vertical-align: top; 
    width: 100px; 
} 

：コードはで遊んするため

次codepenを参照してください

1. 表示：テーブルセル - Iこのメソッドのように、高さを適切に設定していますが、幅を設定する方法はわかりません。

2. display：インラインブロック - この方法では幅を簡単に設定できますが、行/行内のブロックと動的に一致するように高さを設定することはできません。いくつかのセルは1行を持つかもしれません。いくつかのセルは5行を持つかもしれませんが、それらはすべて特定の行に対して同じ高さでなければなりません。

あなたのアドバイスは大歓迎です！

Answer 1

あなたは、ディスプレイを使用する場合：あなたは、ディスプレイを使用したい場合は

.table-frame-cell { 
    border: 1px solid lightskyblue; 
    display: table-cell; 
    vertical-align: top; 
    min-width: 100px; 
    max-width: 100px; 
} 

または

：インラインブロックをあなたは、テーブルセル、セットの最大幅と最小幅を要素の高さを設定する必要があります。

.table-frame-cell { 
    border: 1px solid lightskyblue; 
    display: inline-block; 
    vertical-align: top; 
    width: 100px; 
    height: 100px; 
} 

Answer 2

それはnot to use tables for layouts一般adviseableだ、とdisplay:table-cellは細かい検証が、最終的にも説明したのと同じ問題を（持っています提供されたリンクで）。

CSSレベル3を使用することは問題ではない場合は、このために（Flexbox Browser Compatibility）をflexboxesを使用することができ、このような：

.flex-container { 
 
    background-color: green; 
 
    display: flex; 
 
} 
 
.flex-container > div { 
 
    background-color: orange; 
 
    flex: 1; 
 
    padding: 15px 20px; 
 
    margin-right: 20px; 
 
    max-width: 120px; 
 
}

<div class="flex-container"> 
 
    <div>Very short text.</div> 
 
    <div>This is a lot of text, even though it's probably very little compared to what you're trying to do, as stack's preview window is comfortably narrow.</div> 
 
    <div>Another bit of text for flavor.</div> 
 
</div>

---

頭に浮かぶ唯一のソリューションCSS3を実装していないブラウザでは、JavascriptやjQueryを使用してすべてのボックスを同じ高さに設定します。widthとともに

Answer 3

オプション＃1

（古いブラウザはサポートのため）

• 使用display:table/table-cell、このような何か：

body { 
 
    margin: 0 
 
} 
 
.table { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.cell { 
 
    width: 25%; 
 
    display: table-cell; 
 
} 
 
.cell:nth-child(odd) { 
 
    background: red 
 
} 
 
.cell:nth-child(even) { 
 
    background: green 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
    </div> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    </div> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
    </div> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    </div> 
 
</div>

オプション＃2

（古いブラウザをサポートませを気にしない場合）

• あなたはこれがあるCSS3 flexbox

body { 
 
    margin: 0 
 
} 
 
.table { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.cell { 
 
    width: 25%; 
 
    flex:1 
 
} 
 
.cell:nth-child(odd) { 
 
    background: red 
 
} 
 
.cell:nth-child(even) { 
 
    background: green 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
    </div> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    </div> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
    </div> 
 
    <div class="cell"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    </div> 
 
</div>