9

次のコードでは、「y」を含む div を、3 つの「x」を含む div の高さと一致させたいと考えています。

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

注意すべきことは、内側の div がフローティングであることです。

4

3 に答える 3

12

A List Apart (私が思うに) で見た解決策がありました。ここでは、2 つの内側の列に大きな下部パディングを与えますが、負のマージンと同じ大きな値を与えます。列の高さが 32000px を超えない限り、これはすべて機能しますが、これはまれです。何かのようなもの：

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

...ここで、「col」は任意の列のクラス名です。その後、別のクラスを使用して、個々の列のスタイルを自由に設定できます。

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

別のオプションは、境界線などを含む外側の div で背景画像を使用することです。このアプローチは明らかに、一度設定すると列 (幅、色) を変更するのが少し難しいことを意味します。

于 2009-05-17T11:16:02.870 に答える
5

3 つのオプションがあります。

  1. 内側の div を外側の div と同じ高さにします。これはそれほど難しいことではありません。
  2. 内側の div を別の div 内に配置し、高さおよび/または最小高さ 100% を使用してそれらを含む div と同じ高さにします。 div またはページ。ただし、試してみる価値はあります。または、最も簡単な
  3. テーブルを使用します。この問題はテーブルでは些細なことです。これは純粋な CSS の欠陥の良い例です。

2 つの div で高さを「共有」する簡単な方法はありません。高さ 100% のようなトリックには、使用する必要がある CSS 属性と、使用している境界線の両方に関して、クロスブラウザーの問題があります。ボーダーは通常、使用する高さに追加されます。

display: table-cell を使用すると言う人もいるかもしれませんが、そのサポートはかなり制限されています (IE では)。

于 2009-05-17T02:52:28.693 に答える
3

あなたがjQueryのスポットに反対していない場合は、EqualHeightを使用できます。それはあなたが望むことをするはずです

于 2009-05-17T10:58:25.380 に答える