0

cssに問題があります。http://yourdesigns.nl/ssi/index.phpで私のウェブサイトをチェックしてください

ご覧のとおり、インデックスページの中央に3列の行があります。各列には、「箱のような」感覚を与える境界線があります。問題は、ボックスの内容が他のボックスよりも少なくなると、ボックスの高さが小さくなることです。

私の目標は、すべてのボックスに同じ高さを与えることです。これは、ボックス要素のクラスにheightプロパティを追加するだけで可能ですが、すべてのコンテンツはデータベースから取得されるため、クライアントがコンテンツを更新すると、ボックスがクラスの固定の高さの値よりも大きく、コンテンツが境界線/ボックスと重なる可能性があります。

cssに固定の高さの値を指定せずに、すべてのボックスを同じ高さにするにはどうすればよいですか？

前もって感謝します、

マイケル

4

5 に答える 5

2

ボックスの高さを等しく保ち、オーバーフローを防ぎたい場合は、ボックスクラスのCSSで高さとオーバーフローのプロパティを設定できます。

.boxes
{
   height:500px;
   overflow: hidden;
   text-overflow:ellipsis; // ends the text block with "..." - css3 no ie7/ie8 support
}

最大のボックスに基づいてボックスのサイズを動的に変更する場合は、jQueryを使用できます。

$(document).ready(function () {      
   var largestBox = Math.max($('#box1').height(),$('#box2').height(),$('#box3').height());
   $('.boxes').height(largestBox );
});

jQueryオプションを示すjsfiddleは次のとおりです。http：//jsfiddle.net/EjPSw/

于 2013-02-15T21:25:01.120 に答える
1

jQueryを使ってみることができます。

各ボックスにIDを付けます（例：box1、box2、box3）。

Uは次のようにjQueryを使用できます。

$(function(){
var box1 = $("#box1").height();
var box2 = $("#box2").height();
var box3 = $("#box3").height();

if((box1 > box2) && (box1 > box3))
{
   box2.height(box1);
   box3.height(box1);
} 
else if((box2 > box1) && (box2 > box3))
{
   box1.height(box2);
   box3.height(box2);
}
if((box3 > box2) && (box3 > box1))
{
   box2.height(box3);
   box1.height(box3);
}
});
于 2013-02-15T21:26:18.593 に答える
1

ボックスをdivコンテナに配置する必要があります。外側のコンテナにはスタイルが必要です

{
    overflow: hidden;
    border-bottom:1px solid gray;
}

コンテナ内のボックスにはスタイルが必要です

{
    border:1px solid gray;
    float:left;
    text-align:center;
    padding-bottom: 200em;
    margin-bottom: -200em;
}

例のリンクをたどってください：

于 2013-02-15T21:09:13.220 に答える
0

次のようなものを試してください

 min-height: 500px
于 2013-02-15T20:59:59.497 に答える
0

css3以外のソリューションはわかりません。すべてのボックスをカウントし、すべてのボックスに最高の高さを与えることで、jQueryソリューションを選択します。

于 2013-02-15T21:08:16.127 に答える