68

私の HTML コードは、ページをそれぞれ 65%、35% の 2 つの列に分割しているだけです。

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div>

にresponse divは変数データが​​あります。にはnote div、固定データがあります。2 つdivの には 2 つの異なるデータ セットがありますが、背景色が両方を含むボックスを塗りつぶすように見えるように、それらを同じ高さで表示する必要があります。当然、問題は です。response divその高さは、現在表示されているデータの量によって異なります。

2 つの列の高さが常に等しくなるようにするにはどうすればよいですか?

4

11 に答える 11

99

背景色が適用された包含 div でそれらをラップし、「列」の後にクリア div を配置します。

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

いくつかのコメントと私自身の考えに対処するために更新されました。

この方法は、本質的に問題の単純化であるため機能します。このやや「オールドスクール」な方法では、2 つの列に続いて空のクリア要素を配置します。クリア要素の仕事は、親 (背景付き) にこれがどこにあるかを伝えることです。フローティング動作が終了すると、親は基本的にクリアの位置で 0 ピクセルの高さをレンダリングできます。これは、以前のフローティング要素の最高値です。

この理由は、親要素が最も高い列と同じ高さであることを確認するためです。その後、背景が親に設定され、両方の列が同じ高さを持つように見えます。

この手法は「oldskool」であることに注意してください。より良い選択は、clearfixのようなものを使用するか、親要素にオーバーフローを非表示にすることで、この高さ計算動作をトリガーすることです。

これはこの限られたシナリオでは機能しますが、各列を視覚的に異なるものにしたり、それらの間にギャップを設けたりしたい場合は、親要素に背景を設定することはできませんが、この効果を得るためのトリックがあります.

秘訣は、すべての列に下部パディングを追加することです。これは、最も短い列と最も高い列の差になる可能性があると予想される最大サイズになります。これを解決できない場合は、大きな図を選択してから、追加する必要があります同じ数の負の下マージン。

親オブジェクトでオーバーフローを非表示にする必要がありますが、結果として、各列はマージンによって提案されたこの追加の高さをレンダリングするように要求されますが、実際にはそのサイズのレイアウトは要求されません (負のマージンが計算に反するため)。

これにより、親が最も高い列のサイズでレンダリングされますが、すべての列がその高さ + 使用される下部パディングのサイズでレンダリングされます。この高さが親よりも大きい場合、残りは単純に切り取られます。

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

この手法の例は、bowers and wilkins の Web サイトで見ることができます(ページの下部にある 4 つの水平方向のスポットライト画像を参照してください)。

于 2009-02-08T20:27:06.483 に答える
38

フローティング div を強制的に別の div と一致させて列効果を作成しようとしている場合、これが私が行うことです。シンプルできれいなので気に入っています。

<div style="background-color: #CCC; width:300px; overflow:hidden; ">
    <!-- Padding-Bottom is equal to 100% of the container's size, Margin-bottom hides everything beyond
         the container equal to the container size. This allows the column to grow with the largest
         column. -->
    <div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
    <div style="float: left;width: 100px;  background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
    <div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
    <div style="clear: both;"></div>
</div>

これは理にかなっていると思います。動的なコンテンツでもうまく機能するようです。

于 2011-03-08T14:52:56.763 に答える
15

これは、複数の div の高さを同じに設定する jQuery プラグインです。以下は、プラグインの実際のコードです。

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};
于 2009-02-08T20:33:27.200 に答える
10

この問題の正しい解決策は、使用することですdisplay: table-cell

重要: このソリューションは、同じコンテナー内の他の要素と整列する要素に既に変換されているfloatため、必要ありません。つまり、フロートのクリア、オーバーフロー、背景の透過、およびハックがパーティーにもたらす他のすべての厄介な驚きについて心配する必要がないことも意味します.table-celldivfloat

CSS:

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}

HTML:

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

関連している：

于 2014-05-06T09:38:40.273 に答える
6

float のない div でそれらをラップする必要があります。

<div style="float:none;background:#FDD017;" class="clearfix">
    <div id="response" style="float:left; width:65%;">Response with two lines</div>
    <div id="note" style="float:left; width:35%;">single line note</div>
</div>

また、ここで clearfix パッチを使用しますhttp://www.webtoolkit.info/css-clearfix.html

于 2009-02-08T20:27:07.590 に答える
4

30 秒で 2 列のテーブルをコーディングして問題を解決できるのに、なぜこの問題が地面に叩きつけられるのか理解できません。

この div 列の高さの問題は、典型的なレイアウト全体で発生します。単純な古い基本的な HTML タグでスクリプトを作成できるのに、なぜスクリプトに頼る必要があるのでしょうか。レイアウト上に巨大で多数のテーブルがない限り、テーブルが大幅に遅いという議論には同意しません。

于 2010-12-10T02:36:28.540 に答える
0

このコードを使用すると、行数を可変にし（各行にDIV数を可変）、各行のすべてのDIVを最も高い隣接行の高さに一致させることができます。

フローティングであるすべてのDIVが、IDが「divContainer」のコンテナー内にあると想定した場合、次を使用できます。

$(document).ready(function() {

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

$('div#divContainer div').each(function(index) {

    if(currentRowStart != $(this).position().top) {

        // we just came to a new row.  Set all the heights on the completed row
        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

        // set the variables for the new row
        rowDivs.length = 0; // empty the array
        currentRowStart = $(this).position().top;
        currentTallest = $(this).height();
        rowDivs.push($(this));

    } else {

        // another div on the current row.  Add it to the list and check if it's taller
        rowDivs.push($(this));
        currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);

    }
    // do the last row
    for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

});
});
于 2011-01-26T19:01:41.993 に答える
0

目的の背景色を使用して、両方を外側の div でラップすることをお勧めします。

于 2009-02-08T20:25:20.823 に答える
0

同じ種類の問題もあり、コンテンツが異なる3つのdivが隣り合っており、それらを「分離」するために右枠が必要でした。機能する唯一の解決策は、別の回答のjQueryオプションをわずかに変更したバージョンでした。ここにあるスクリプトも必要であることを忘れないでください。

以下は、スクリプトのわずかに変更されたバージョンです。これは、真の min-height 設定を可能にするだけです (ボックスを少なくとも特定の高さにする必要があったため)。

/*--------------------------------------------------------------------
 * JQuery Plugin: "EqualHeights"
 * by:    Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2008 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description:   Compares the heights or widths of the top-level children of a provided element
                  and sets their min-height to the tallest height (or width to widest width). Sets in em units
                  by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method    (article:
                  http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
 * Usage Example: $(element).equalHeights();
                  Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
                  Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150);
 * Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/

$.fn.equalHeights = function(px,minheightval) {
    $(this).each(function(){
        if (minheightval != undefined) { 
            var currentTallest = minheightval;    
        } 
        else { 
            var currentTallest = 0;
        }
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { 
                currentTallest = $(this).height();
            }
        });
        if (!px || !Number.prototype.pxToEm) 
            currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified.
        // For Internet Explorer 6, set height since min-height isn't supported.
        if ($.browser.msie && $.browser.version == 6.0) { 
            $(this).children().css({'height': currentTallest});
        }
        $(this).children().css({'min-height': currentTallest});
    });
    return this;
};

それは魅力のように機能し、何も遅くしません:)

于 2010-08-04T08:36:14.697 に答える
0

いつでも背景画像を使用してそれを行うこともできます. 他の唯一の完璧なソリューションはJqueryオプションであるため、私はこのオプションに100％投票する傾向があります。

背景色で外側の div を使用する場合と同様に、両方の div のコンテンツを同じ高さにする必要があります。

于 2010-06-21T11:15:57.470 に答える