Kann ein Clearfix mit <hr /> überschrieben werden?

Derzeit habe ich einen Clearfix um eine große Menge von Inhalten gewickelt. Ich habe mehrere Sätze von Bildern auf der linken Seite und Text auf der rechten Seite mit einem <hr /> unter jedem. Das einzige Problem ist, dass ich manchmal nicht genug Text habe, um das Bild auszugleichen, und so wird die <hr /> inline mit dem Bild gezogen. Ich brauche alle <hr /> frei von dem Clearfix, ist das möglich?Kann ein Clearfix mit <hr /> überschrieben werden?

Das ist mein clearfix:

.clearfix::after { 
    content: ""; 
    clear: both; 
    display: table; 
}

Die <hr>

hr { 
    margin-top: 3rem; 
    margin-bottom: 3.5rem; 
    border-width: 0; 
    border-top: 3px dashed #cacaca; 
} 

hr { 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    height: 0; 
}

Mein <html>:

<div class="main-wrap"> 

<div class="clear-fix"> 
<h2>Title</h2> 

<p class="content-image"> 
    <img src="http://example.jpg"> 
</p> 

<h3>Title</h3> 

<p>Example text.</p> 
<hr /> 

<p><img src="http://example.png" /></p> 

<h3>Example</h3> 

<p>Lots of example text here.</p> 

<hr />

Dies ist, was mein HTML wie jetzt aussieht.

Quelle

2017-01-12 jonbon

Willkommen zu StackOverflow, deine Frage sh Es sollte ein minimales, vollständiges und überprüfbares Beispiel enthalten [http://stackoverflow.com/help/mcve]. – hungerstar

Könnten Sie bitte den HTML-Code des Clearfix und des '

' in Frage nehmen. – DanielGibbs

@DanielGibbs der Clearfix war bereits enthalten, aber ich habe die hr für Sie auch – jonbon

nur ein "clearing" Klasse hinzufügen, die clear: both; zum hr enthält:

(oder hinzufügen clear: both; zum hr Element selbst)

img { 
 
    float:left; 
 
} 
 

 
.clearing { 
 
    clear: both; 
 
}

<img src="http://placehold.it/300x200"> 
 
<hr class="clearing">

Quelle

2017-01-12 21:46:07 Johannes

Es gab einige zusätzliche hr, die auch dies durcheinander gebracht.Ich benutzte diese + ein .speziellen-Platz hr {} und es reparierte es – jonbon

Kann ein Clearfix mit <hr /> überschrieben werden?

Antwort

Verwandte Themen