Warum dieses "clear: both" verhindert nicht Wrapping?

Ich nehme an, ein DIV mit "clear: both" -Stil kann seinen Elternteil, der DIV enthält, nicht umbrechen, aber unter HTML scheint auf diese Weise nicht zu funktionieren.Warum dieses "clear: both" verhindert nicht Wrapping?

Wenn das Browserfenster schmal ist, wird das zweite DIV "OK OK" immer noch in der nächsten Zeile angezeigt.

<div style="overflow: hidden;"> 
     <div style="float: left; overflow: hidden; white-space: nowrap"> 
         Hello world 1 Hello world 2 Hello world 3 
        </div> 
     <div style="float: left; overflow: hidden; white-space: nowrap"> 
       OK OK OK OK OK OK OK OK 
        </div> 
     <div style="clear: both;"> 
     </div> 
    </div>

Habe ich etwas übersehen?

Quelle

2009-04-25 Morgan Cheng

Da die beiden inneren Divs nach links verschoben sind, werden sie umgebrochen, wenn das Browserfenster zu schmal wird. Ich würde vorschlagen, dass Sie eine Breite auf der äußeren div (die Sie haben einen Überlauf: versteckt auf). Auf diese Weise können die zwei inneren divs floaten, aber sie werden nicht umgebrochen, wenn der Browser schrumpft.

<div style="overflow: hidden; width: 600px;"> 
      <div style="float: left; overflow: hidden; white-space: nowrap"> 
        Hello world 1 Hello world 2 Hello world 3 
       </div> 
      <div style="float: left; overflow: hidden; white-space: nowrap"> 
          OK OK OK OK OK OK OK OK 
       </div> 
      <div style="clear: both;"> 
      </div> 
    </div>

Wenn Sie mehr Kontrolle möchten, müssen Sie möglicherweise den Min-Width-Hack mithilfe von Ausdrücken in IE implementieren; Min-Breite: funktioniert in FF.

Quelle

2009-04-25 13:29:54

gibt es immer eine Chance, die divs für die innere divs angegeben wird, solange keine Breite wickeln wird. Wenn Sie keine Breite angeben, wird ein Floating-Div so breit wie nötig, um seinen Inhalt zu halten, bis zu einem Maximum der Breite seines Containers. – wheresrhys

Ich denke, Sie könnten die "clear" Eigenschaft missverstehen. Das Steuerelement wird nicht speziell gesteuert, es steuert die Platzierung von Floating-Elementen, die danach kommen. Es gibt nichts in Ihrem html darüber, das verhindert, dass das zweite div in die nächste Zeile fließt.

Dies ist ein ziemlich guter Überblick über Clearing-Elemente: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

Um fließt das Layout nicht zu machen, werden Sie wahrscheinlich eine harte Breite auf div-Container angeben müssen.

Quelle

2009-04-25 13:32:14 womp

Fügen Sie Ihrem Style zwei neue Eigenschaften hinzu & es wird funktionieren!

text-align: left; 
    width: 1010px;

    <div style="float: left; overflow: hidden; white-space: nowrap; 
        text-align: left;width: 1010px;"> 
        Hello world 1 Hello world 2 Hello world 3 
       </div> 

       <div style="clear: both;"> 
       </div> 
       <div style="float: left; overflow: hidden; white-space: nowrap; 
         text-align: left;width: 1010px;"> 
         OK OK OK OK OK OK OK OK 
         </div> 
         <div style="clear: both;"> 
         </div> 
         </div>

Quelle

2013-02-01 06:31:32

Warum dieses "clear: both" verhindert nicht Wrapping?

Antwort

Verwandte Themen