5

等しい高さの列または要素をシミュレートするためのいくつかの異なるソリューションについて読みましたが、ハック、非常に複雑なHTMLレイアウト、または広くサポートされていない属性を使用していたため、実際に注目を集めたものはありませんでした。

これがフィドルの例です。

私の目標は、すべての要素が同じ高さ、または少なくとも行の兄弟の最大の高さであることを確認することです。

行は3つの要素で構成されます（この場合、行ラッパーは存在しませんが、そのようなコンテナー要素を追加することを検討できます）。

次のような解決策はありますか？

  1. JSは必要ありません
  2. 使用しませんdisplay: table
  3. 負の値で広いパディング/マージンを使用しません
  4. divとfloatを指数関数的に使用する必要はありません
4

3 に答える 3

5

あなたが作った制限で：いいえ、ありません。

編集:これについて言及しなかったため:これにはテーブルを使用できます。(90年代へようこそ)

于 2012-05-25T12:31:33.087 に答える
5

これには CSS3 flexプロパティを使用できます。次のように書きます。

CSS

.parent{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    width:100%;
    min-height:200px;
}

.parent div{
    background:red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    border:2px solid green;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

これをチェックしてくださいhttp://jsfiddle.net/VkPmg/2/

于 2012-05-25T13:25:47.273 に答える
1

固定幅レイアウトの場合は、背景画像で偽装できます。境界線をシミュレートするタイル イメージの背景を想像してみてください。メイン コンテナーで y を繰り返すだけです。

たとえば、3 つの 100px ボックスがフローティングしている 400px コンテナがある場合 (フィドルのように)、メイン コンテナで 1x400 の画像を繰り返す必要があります。使用した境界線の色のように見える 1 ピクセルの適切な x 位置にこの画像を追加するだけです。そしてそれを繰り返します！

この手法を使用すると、ボックスの高さは (実際には) 異なりますが、より高いボックスがコンテナーを押して背景が表示されるため、表示はボックスのように見えます。

于 2012-05-25T14:23:03.610 に答える