1

私は多くのこと（cssとjs）を試しましたが、次のサイトで同じ高さのボックスを取得できません。

http://www.ancoris.com

私が話しているボックスは、「Ancoris Success Stories」（オレンジ色のボックス）と右側の2つから始まります。

私が話している領域は以下のとおりです（すべてのコードを含めているわけではなく、イコライズする必要があるコンテナと3つのdivだけを含めています）：

<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4">
   <div class="moduletable blueboxonly span4">
   <div class="moduletable orangebox h3 span4">
</div>

できればCSSでこれを実行したいのですが、取得できません。

ありがとう

4

6 に答える 6

6

これには、display:tableプロパティを使用できます。次のように書きます。

#below-content{
 display:table;
}
.moduletable{
 display:table-cell;
}

注：display:tableIE8以降まで

于 2012-07-16T08:10:11.143 に答える
2

すべての div の高さを、最大の高さを持つ div の高さに設定できます。

var maxHeight = 0;

var divs = jQuery("#below-content .moduletable");

jQuery.each(divs, function(){
    var height = jQuery(this).height();
    if(maxHeight<height)
        maxHeight = height;

});
divs.height(maxHeight);
于 2012-07-16T08:17:06.773 に答える
1

新しいCSSスタイルルールを作成して、このファイルの15行目にある既存のCSSセレクターの最小の高さ要件を設定します。

現在使用されているCSSに基づいて、中央のボックスはでロックされ、この要素の上部と下部に適用されますheight:256px。padding:9pxとはいえ、最小の高さの合計は274px（9 + 256 + 9）です。 

.row-fluid .span4{
  min-height: 274px;
}

上記のCSSセレクターは、ボックスの行全体の最小の高さを指定します。

スクリーンショット：

ここに画像の説明を入力してください


ステータスアップデート：

オレンジ色と青色のボックスのコンテンツには動的コンテンツが含まれているため、実際にはWebページのレイアウト要件に必要な ものを定義できます。min-height以前274pxは、当時のブルーボックスの内容に基づいていました。

コンテンツがこの設定されたしきい値を超えると、ボックスが不均一になることに注意してください。

解決策は、実際に必要な最小の高さを見つけることです。これは、各オレンジ色のボックスと青色のボックスを見て、必要な最終的な垂直方向の高さを実現するために、最大アイテム数と最大アイテム高さを確認することで実現されます。

次に、すべてのボックスが100％の容量またはこれよりも小さい値で動的データを表示している場合でも、すべての高さが等しくなります。

そのレイアウト管理をさらに一歩進めて、右側のボックスに対して同じことを行うことができるので、ブログボックスの下部はその行の他の下部と一致します。

于 2012-07-16T08:33:27.163 に答える
0 

function equalHeight(group) {
    jQuery(group).css("height", "auto");

    eqheight = 0;
    group.each(function () {
        thisHeight = jQuery(this).height();
        if (thisHeight > eqheight) {
            eqheight = thisHeight;
        }
    });
    group.height(eqheight);
}
jQuery(document).ready(function () {
    equalHeight(jQuery(".moduletable"));
});
jQuery(window).resize(function () {
    equalHeight(jQuery(".moduletable"));
});

function equalHeight(group) {
    jQuery(group).css("height", "auto");

    eqheight = 0;
    group.each(function () {
        thisHeight = jQuery(this).height();
        if (thisHeight > eqheight) {
            eqheight = thisHeight;
        }
    });
    group.height(eqheight);
}
jQuery(document).ready(function () {
    equalHeight(jQuery(".moduletable"));
});
jQuery(window).resize(function () {
    equalHeight(jQuery(".moduletable"));
});
.blueboxonly{
  background-color: blue;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}

.orangebox{
  background-color: orange;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4"> 01 div</div>
   <div class="moduletable blueboxonly span4"> 02 div<br/>02 div</div>
   <div class="moduletable orangebox h3 span4"> 03 div<br/>03 div<br/>03 div</div>
</div>

于 2016-03-23T09:57:18.250 に答える
0 

function equalHeight(group) {
    jQuery(group).css("height", "auto");

    eqheight = 0;
    group.each(function () {
        thisHeight = jQuery(this).height();
        if (thisHeight > eqheight) {
            eqheight = thisHeight;
        }
    });
    group.height(eqheight);
}
jQuery(document).ready(function () {
    equalHeight(jQuery(".moduletable"));
});
jQuery(window).resize(function () {
    equalHeight(jQuery(".moduletable"));
});
.blueboxonly{
  background-color: blue;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}

.orangebox{
  background-color: orange;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4"> 01 div</div>
   <div class="moduletable blueboxonly span4"> 02 div<br/>02 div</div>
   <div class="moduletable orangebox h3 span4"> 03 div<br/>03 div<br/>03 div</div>
</div>

于 2016-03-23T10:01:02.860 に答える
0

テーブルはどうですか？css ルールを使用して div をテーブルのように動作させようとしているようですが、ブロックをレンダリングするために適切なテーブルを追加するのはどうでしょうか?

正しく使用しないと、テーブルが悪いことはわかっています。ここでの「正しく」とは、テーブルをほとんどレンダリングする必要のないものをレンダリングするためにテーブルを使用すべきではないことを意味します...多くの記事からそれを理解しています:テーブルは非推奨ではなく、注意して使用するだけです。ここで重要なのは、選択肢があまりないということです。CSS は不安定すぎて実現できず、Javascript はハエを殺すためのハンマーのように思えます。

テーブルで試してみて、どうなるかを確認することをお勧めします。そしてもちろんお知らせください。

幸運を！

于 2012-07-16T08:49:40.647 に答える