2

サイトの寄付ウォールに書かれたメッセージごとに DIV を生成するスクリプトがあります。寄付ウォールはこちらからご覧いただけます。

これは、DIV を生成するスクリプトのセクションです。

foreach( $donors as $donor ):
$output = '<div class="donorbox"><p><strong>'.$donor->name.'</strong> donated '.$donation.'<small class="date time">on '.$datetime.'</small><blockquote class="comment">'.nl2br($donor->comment).'</blockquote></p></div>';
endforeach;

各ドナー ボックス DIV の幅を 43.5% に設定し、float:left を追加して、各行に常に 2 が収まるようにしました。

ユーザーが書くメッセージの長さに応じて、DIV の高さが異なるため、DIV の表示はかなり不均一になります (上記のリンク先のページを参照)。したがって、1 行に常に 2 つあるように DIV を垂直方向に中央揃えする方法を見つけたいと思いますが、より均等に表示されるように、つまり 2 つの DIV の垂直方向の中心点が揃うようにします。

現在の実装のもう 1 つの問題は、左側の DIV の高さが右側の div の高さよりも大きい場合、次の div が強制的に左側に配置されるのではなく、ページの右側にとどまることです。これは私が望むものではありません。ページを見て、ブラウザ ウィンドウの幅を縮小すると、これを確認できます。3 番目のドナーボックス DIV は右側に残ります。

うまくいけば、私が理解していることをより明確にするために、以下に2つの画像を含めます。

現在

ここに画像の説明を入力

必要

ここに画像の説明を入力

4

2 に答える 2

2

要素の高さが不明な場合は、display: inline-block代わりに常に を使用してfloatください。ここで変更すると、常に正しく配置されます。それらを垂直方向に中央に配置するには、それらにも追加vertical-align: middleするだけです:)

display: inline-block;Ps追加のIE7サポートが必要な場合*display: inline; *zoom:1;;)

于 2012-08-02T17:37:40.453 に答える
0

次のようなものを使用して、2番目のものを正しくフロートさせることができます。

.yourclass:nth-of-type(2n) {float:right !important;}
于 2012-08-02T17:52:31.923 に答える