2

ここで私のコードを見てください。少なくとも 2 つのブロックをインラインで表示できるように、結果パネルのサイズを変更する必要があります。「 」リンクをクリックするMore detailsと、詳細が表示されますが、次の行ブロックもシフトされます。

私が使用したにもかかわらず、なぜこれがこのように表示されているのかについての提案clear:both。

.reviewimg_blk {
    border: 1px solid #9B9B9B;
    float: left;
    margin-bottom: 15px;
    margin-right: 15px;
    margin-top: 15px;
    padding: 5px 5px 5px 10px;
    position: relative;
    width: 395px;
}
4

4 に答える 4

0

..ライブデモ

こんにちは今はCSSのルールに慣れEvenていますodd

.itemStyle:nth-child(odd) {
clear:left;
    float:left;
}

詳細情報偶数または奇数ルール

于 2012-10-29T06:35:26.630 に答える
0

これは が原因で発生してposition:relativeいます。Position:relative下のブロックが下に移動するように、div またはブロックの関係を維持します。position:absoluteそのドロップダウン部分に関連する場所で代わりに使用します。

于 2012-10-29T06:11:27.570 に答える
0

これは、最初のitemStylediv のコンテンツが多く、他の div よりも高さが高いためです。

したがって、<div class="clear"> </div>2 つの div ごとに追加するitemStyleか、min-height をitemStylediv に固定します。

デモではclear2 つの div ごとにクラスを追加しました。itemStyle

デモ

于 2012-10-29T06:13:45.413 に答える
0

これはフロートの一般的な問題です。

IE7 のサポートが必要ない場合は、display: inline-block; vertical-align: top;代わりに使用してください。float:left;

クロスブラウザ ソリューションについては、https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/を参照してください。

于 2012-10-29T06:45:33.603 に答える