1

スクリーン ショットでは、左側 (フローティングではない) にアイテムのリストが表示され、右側 (フローティング) に表示ボックスが表示されます。左のアイテムの li 要素が表示ボックスに食い込まないようにするにはどうすればよいですか。li コンテンツはフローに従い、表示ボックスに入る前に新しい行に分割されますが、コンテナー内の li 要素はそうではありません。

左の div が右の div に切り替わる

左の Li 項目:

border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;

右側の表示ボックス:

border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;

ありがとう、ライアン

ロバートの提案の後:

li要素にインラインブロックを追加する

ティム B への対応

幅は、ページごとに異なるようにページごとに動的ですが、表示ボックスを超える li 要素を除いて、ページごとに変更されることはありません。写真を左にフロートさせ、テキストを写真の右に配置するのと同じですが、写真が終了すると、テキストは画像の下にページの右端まで続きます。 . したがって、li 要素を右側の表示ボックスの左端に配置したいのですが、ボックスを超えてページの端に移動したいと考えています。テキスト自体はこれに準拠していますが、何らかの理由で、li 要素が「オブジェクト」の存在を認識せず、停止して表示ボックスに割り込まないようにします。認識しないのは、右側のフローティング ディスプレイ ボックスのためです。

4

3 に答える 3

0

テキストは希望どおりに機能しますが、それを含むLIは機能しないため、LIはブロックレベルの要素（http://htmlhelp.com/reference/html40/block.html）としてレンダリングされていると思います。display：inline-blockに設定してみてください。

于 2012-07-23T20:37:00.207 に答える
0

要素をフロートさせ、他の要素をフロートさせない場合、これらの問題に遭遇します。ul 要素をフローティングさせ、アイテムに幅を与えてみてください。

于 2010-09-20T22:30:40.437 に答える
0

右側の列の最大幅がわかっている場合は、margin-right:00px; を追加できます。リスト項目またはリスト自体のいずれかに。

于 2010-09-21T08:34:57.310 に答える