6

テーブルに行がある場合、その行は同じ高さであり、行内のすべてのセルは動的コンテンツで拡大および縮小します。(1 つのセルに大量のテキストがあり、他のセルはそれほど多くない場合、それらはすべて同じ高さになり、列と行を作成できます)。

テーブルを使用した div フロート レイアウトの人気により、しばしば眉をひそめられます。ただし、ブロック、クロスブラウザーの利点のために表示をブロックに設定したまま、テーブルのこれと他の機能と利点を複製するにはどうすればよいですか?

私は多くのハックを見てきましたが、それらは常に複雑すぎたり、互いに干渉したり、微調整が必​​要だったりするようです. 次の標準的な信頼できる方法を探しています。

ラッピング コンテナーを使用して div ボックスを行全体で同じ高さにする

<style>
    .cell { float:left; }
</style>
<div class="row">
    <div class="cell">Content 1 with more width</div>
    <div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
    <div class="cell">Content 3</div>
</div>

この場合、クラス「セル」のすべての div は同じ高さになり、固定された高さではなく、フローティングされ、任意のサイズの動的コンテンツに対してそのままになります。

コンテンツを垂直方向に中央揃え

この場合、上記の例を使用すると、あらゆるサイズの動的コンテンツに対して、すべてのコンテンツが中央に垂直に配置されます。

クラス「セル」の div が、ラッパー「行」に基づく共通の幅を共有するようにします。

表で幅を 100% または固定幅として指定すると、画像やブロックのようなアイテムで禁止されていない限り、セルは自動的にすべて同じ幅になろうとします。フローティングdivでこれをどのように達成できますか? すべての「セル」を左にフロートすると言うように、最小幅または固定幅を指定できますが、テーブルのように動的な共通の幅を共有する方法はわかりません。フローティング div 自体では、コンテンツのサイズに縮小されます。

コンテナ/ラッパーの「行」に対するコンテンツのプッシュを回避し、単なるブロックであるかのように扱う方法

何らかの理由で、フローティング div がラッパー内にある場合、コンテンツがまるでフローティングしているかのようにラッパーに「くっつく」という奇妙な動作が発生する可能性があります。最後にa を使用すると、時々<br style="clear:both">これが起こりました。

フローティング div に関するこれらすべての質問に答えていただければ幸いです。これらはすべて同じことに関連しているため、これを別々の質問に分割するように言わないでください。これは別の場所で尋ねたほうがいいとは言わないでください。しかし、あなたが役に立ちたいのなら:)

ソリューションがdisplay:table-cell単独で使用されている場合、私はこれを試しました.divがブロックとして動作せず、縮小し、背景もコンテンツに縮小し、他の方法ではブロックとして動作しません. また、IE の一部のバージョンではこれがサポートされていないため、クロス ブラウザー ソリューションを探しています。ありがとうございました。

4

4 に答える 4

2

div要素をテーブル セルのように動作させたい場合は、そのようにスタイルを設定できます。

.row {
  display: table;
  width: 100%;
}
.cell {
  display: table-cell;
  width: 33.33%;
  vertical-align: middle;
  text-align: center;
}​

heightこれは、または要素min-heightの設定に依存しない.cellため、高さは柔軟なままです。

--- jsFiddle デモ ---

于 2012-08-16T16:28:31.233 に答える
1

次のように CSS を適用できます。

.row{
    height: 200px;
}
.cell{
    display:block;
    float:left;
    height:100%;
}

これは動作中のライブデモです。

また、列を分散するための回避策もあります。

お役に立てれば

注:div親 div を満たすために子にパーセンテージ属性を追加しないでください (たとえば、2 つの子 div にはそれぞれ 50%、4 つの子 div には 25% など)。これらは div の数によって異なり、正確に計算できない場合があるためです。

于 2012-08-16T16:23:30.253 に答える
1

さて、私はjQueryルートに行きました... http://jsfiddle.net/dtgEt/1/

はい、テーブルを使用するだけの人もいますが、テーブルはレイアウトではなく、表形式のデータを表示するためのものであることを指摘したいと思います。div にはセマンティックな意味がないため、私の意見では、より良い選択です (Web に公開しているのが実際に表形式のデータでない限り)。

私のソリューションは IE 7 で機能し、おそらく IE 6 でも機能します。コンテンツをコンテナーの中央に揃えたい場合は、他の人が提案した多くの良い方法があります (私を打ち負かしてください)。

于 2012-08-16T17:27:24.910 に答える
-1

表の書式設定が必要であるが、 をサポートしていない古いブラウザをサポートする必要がある場合は、表display:tableを使用してください。それはとても簡単です。

テーブルが適切なオプションである場合もあれば、テーブルの書式設定をシミュレートするために適度にリスクのある JS または jQuery を追加しなくても機能する唯一のオプションである場合もあります。

たとえば、テーブル (またはdisplay:table、同じことになります) は、動的コンテンツの真の垂直方向の中央揃えを行う唯一の自然な方法です。また、動的コンテンツに対して同じ高さの列を強制する唯一の自然な方法でもあります。また、一般に、何らかのデータ グリッドを表示する必要がある場合はいつでもテーブルが適しています。

于 2012-08-16T16:49:31.543 に答える