float Objekte geht über ein anderes Float-Objekt

Question

Ich habe einen Kommentar Abschnitt auf meiner Website, machte ich die linke Seite für Benutzerinformationen mit Float links, und die rechte Seite mit dem Kommentar Körper ist Float rechts, jetzt, wenn jemand ein auch eingibt Lange von einem Text überläuft der andere den nächsten Kommentar, wie kann ich es besser aussehen lassen. Ich füge eine JSfiddle zum Beispiel hinzu. dank

https://jsfiddle.net/czz2qwab/8/

html:

<div class="comment"> 
        <div class="left"> 
         <li><img src=""></li> 
         <div class="cmnt-gr"> 
         <h5> <a class="user" href="">just me</a></h5> 

          <h6 class="time">now</h6> 
         </div></li> 
        </div> 
        <div class="right"> 
         <li> 
           <h6 class="comment-b"> try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try</h6> 
         </li> 
        </div> 

    <div class="comment"> 
        <div class="left"> 
         <li><img src=""></li> 
         <div class="cmnt-gr"> 
         <h5> <a class="user" href="">just me</a></h5> 

          <h6 class="time">now</h6> 
         </div></li> 
        </div> 
        <div class="right"> 
         <li> 
           <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try</h6> 
         </li> 
        </div> 
        <div class="comment"> 
        <div class="left"> 
         <li><img src=""></li> 
         <div class="cmnt-gr"> 
         <h5> <a class="user" href="">just me</a></h5> 

          <h6 class="time">now</h6> 
         </div></li> 
        </div> 
        <div class="right"> 
         <li> 
           <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try </h6> 
         </li> 
        </div> 

    <div class="comment"> 
        <div class="left"> 
         <li><img src=""></li> 
         <div class="cmnt-gr"> 
         <h5> <a class="user" href="">just me</a></h5> 

          <h6 class="time">now</h6> 
         </div></li> 
        </div> 
        <div class="right"> 
         <li> 
           <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try </h6> 
         </li> 
        </div> 
     <div class="comment"> 
        <div class="left"> 
         <li><img src=""></li> 
         <div class="cmnt-gr"> 
         <h5> <a class="user" href="">just me</a></h5> 

          <h6 class="time">now</h6> 
         </div></li> 
        </div> 
        <div class="right"> 
         <li> 
           <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try try try try try try try try try try try try try try try try try try try</h6> 
         </li> 
        </div> 

css:

.left{ 
     float:left; 
     width:40%; 
     /* 
     background: #333; 
     */ 
     height:60px; 
    } 
    .right{ 
     float:right; 
     width:60%; 
     /* 
     height:100px; 
     */ 
     /* 
     border-top: 1px solid #e8e8e8; 
     */ 
     vertical-align: text-top; 

     height:60px; 
    } 
    .comment{ 
     background: #fafafa; 
     /* 
     overflow-y: scroll; 
     */ 
     font-family: "Roboto", sans-serif; 
    position: relative; 
     vertical-align: text-top; 

    } 
    .comment li{ 
     list-style:none; 
    } 

Answer 1

cale_b in einem Kommentar erwähnt, dass Ihr Markup ungültig ist. Er liegt nicht falsch. Ich habe die überflüssigen Listenelement-Tags gelöscht <li></li>. Wie cale_b erwähnt, gehören diese als Kinder von entweder geordneten oder ungeordneten Listen. Also habe ich Dinge überarbeitet, um das zu tun, was ich zu erreichen hoffte. welches einen Benutzer und ein Datum/Zeit zu jedem Kommentar zuordnen sollte. Ihr Markup war ein Durcheinander, wobei keines der <div class="comment"> Tags entsprechende schließende </div> Tags hatte. Um ein klares Bild davon zu bekommen, wo die Dinge falsch laufen, ist es notwendig, zuerst Ihr Markup zu validieren.

Es ist auch hilfreich, Standardwerte zu verstehen, die Browser auf bestimmten Elementen platzieren. Wenn Sie Ihren Inhalt in die Header-Tags h5 und h6 einfügen, ohne auch die Standardmargen zu bearbeiten, kann dies zu unerwarteten Nebeneffekten führen. Browser können ihren eigenen Standardrand und/oder Abstand für bestimmte Elemente festlegen, und Sie können keine Konsistenz erwarten. Die Adressierung dieser Standardwerte in Ihrem Projekt-CSS wird einen großen Beitrag dazu leisten, berechenbare browserübergreifende Konsistenz zu erreichen. Es gibt viele "Reset" -Fehler, here's one. Dies ist der Grund, warum Ihr Text trotz der Versuche der vertikalen Ausrichtung im CSS in der Mitte ausgerichtet ist. Die Verwendung der inspector/DevTools in den meisten modernen Browsern hilft Ihnen zu sehen, wo die Dinge mit unerwarteten Padding/Marge/Zeilenhöhe schief gehen könnten.

Da Sie für jedes floated div feste Höhen definiert haben, begrenzt dies natürlich die Menge an Kommentaren, die jeder Kommentar enthalten kann, ohne etwas mit dem Überlauf zu tun. In Ihrem Beispiel wird dieser Überlauf angezeigt, der dem Kommentar unterlagert wird, wenn das Ansichtsfenster ausreichend eingeschränkt ist.

Aber die Höhe Definition zu entfernen hat unbeabsichtigte Nebenwirkungen (Hintergrundfarbe für Klarheit eingefügt):

Ich vermute, dies ist, warum Sie die height Eigenschaft in erster Linie definiert. Dies ist, wo Clearing Floats helfen können, Dinge zu glätten. Wie in this answer to a similar question beschrieben, behebt das Löschen Ihrer Floats in jedem .comment Container den unerwarteten Inhaltsumbruch, der im obigen Screenshot zu sehen ist. Sie können dies tun, indem Sie eine neue div erstellen oder indem Sie die Pseudoklasse ::after verwenden, um Inhalt einzufügen, der die Löschung für Sie durchführt. Ich bewarb mich weiter einige Arten und Farben für die Wirkung:

Wie Sie sehen können, Ihre Kommentare jetzt eine beliebige Menge an Inhalten haben. Wenn Sie Ihre Floats löschen, müssen Sie sich nicht länger darum sorgen, dass der Inhalt eines Containers den Inhalt eines anderen Containers beeinträchtigt.

Meine jsfiddle Revisionen: https://jsfiddle.net/afilbert/czz2qwab/9/

Auch ein Link zu einem recht ausführlichen Artikel auf Schwimmern: https://css-tricks.com/all-about-floats/