0

2つの列を作成するためにフロートしようとしているとがdivあります。ul内のアイテムulもフロートされているため、垂直方向に折り返す前に水平方向に拡張します。

http://jsfiddle.net/3dhHe/7/

<style type="text/css">
    ul {list-style-type: none;}
    li {float:left; width:275px; min-height: 50px; padding: 12px; border-radius: 4px; border: 2px outset #eee;}
    .float-right {width: 300px; float: right; margin-left: 25px;}
    .float-left {float: left;}
</style>

<div class="float-right">
    This content should float to the right
</div>
<ul class="float-left">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
    <li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li>
</ul>

リストアイテムからfloatを削除すると、すべてが期待どおりに機能しますが、li要素にfloatが適用されている場合、要素はfloatulを「失う」ように見えます。

ulの内容をフロートさせながら、ulをdivの左側にフロートさせる方法はありますか？注：ulの幅は動的である必要があるため、明示的な幅を設定することはできません。

ありがとう！！！

アップデート

私はこのようなことを達成しようとしています： フロート2列

右側のテキストには静的な幅を設定できますがul、ボックスを含むには明示的な幅を設定しないでください（ブラウザの幅を大きくすると、[テスト3]ボックスが最初の行に移動します）。

私が抱えている問題は、に幅を設定しないとul、テキストコンテンツがul：の上に移動することです。

最初に配置してから、残りのスペースのみを使用するようにdiv制限する方法はありますか？ul

4

1 に答える 1

1

目標を達成するには:

1 . liの内側はすべてul1 行に水平に配置する必要があります。

これが達成されると:

2 . は、横に浮くのにul十分なスペースを見つける必要があります。div

ula を指定してmax-width、拡張しないようにし、必要なだけスペースを取らないようにする必要があります。すべての子が互いに横に浮くように十分であることを確認してくださいli。

max-widthそれで十分でない場合、NOliと言う力がなくなります。、そしてそれらは単純に新しい行を互いに下に置きます。

それをチェックしてください：http://jsfiddle.net/AliBassam/3EmdM/

なぜこうなった？

あなたが彼らに言っているとき、liそれfloat:left;はあなたが彼らに言っているのと同じです：あなたが左に浮くように最善を尽くしてください、あなたが左に浮くことができるようにあなたができるすべてのスペースを取ってください、そして泣いてあなたのお母さんに不平を言い（ul）、あなたが浮く必要があることを彼女に伝えてください左！私たち全員が同じラインにいます！.

すべての子が同じ行に表示されulていないことに が気付いた場合、それを実現できるように の下に新しい行を追加します。lidiv

別の例を次に示します。2liが互いに横に浮いている場合(1)であり、全体が(2)ulの横にあるのに十分なスペースがある場合は、その横に浮いていることに注意してください。div

2の別の例divsを次に示します。同じ結果です。2 番目は、divそのすべての子divがその内部で浮動し(1)、もう一方の横に十分なスペースが見つかるまで浮動しませんdiv(2)。

アップデート

必要なのは、親 Div内にdivと の両方を持つことです。これにはandがあり、最小幅を指定すると、ブラウザを最大化したときに拡大できます。また、小さくすることはできますが、限界までしかできません。 .uldivposition:relatve;min-width

次に、子にdivstaticwidthを250px与えます。ulposition:absolute;right:250pxmargin-right

<div style="position:relative; min-width:600px;">
<ul style="position:absolute; right:250px; left:0px; ">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
</ul>
<div style="float:right; width:250px;">
    This content should float to the right
    <br />
    This content should float to the right
    <br />
    This content should float to the right
    <br />
    This content should float to the right
</div>
</div>

それをチェックしてください：http://jsfiddle.net/AliBassam/FFrev/

于 2013-01-31T23:59:25.497 に答える