clearfixを<hr />で上書きすることはできますか？

現在、私は大量のコンテンツを包むクリアフィックスを持っています。私は左側に複数の画像セットを、右側にはそれぞれ<hr />というテキストを持っています。唯一の問題は、画像のバランスをとるのに十分なテキストがないことがあり、<hr />が画像とインラインで表示されることです。私は<hr />のすべてがclearfixから解放される必要があります、これは可能ですか？clearfixを<hr />で上書きすることはできますか？

これは私のclearfixです：

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

<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; 
}

マイ<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 />

これは私のHTMLが今のように見えるものです。

出典

2017-01-12 jonbon

ようこそStackOverflowに、あなたの質問sh ouldには、最小、完全、および検証可能な例が含まれています。[こちらの方法]（http://stackoverflow.com/help/mcve） – hungerstar

clearfixのHTMLと問題の '

'を含めてください。 – DanielGibbs

@DanielGibbs clearfixは既に含まれていましたが、私もあなたのためにhrを追加しました。 – jonbon

だけhrにclear: both;が含まれている "クリア" クラスを追加：

（またはhr要素自体にclear: both;を追加）

img { 
 
    float:left; 
 
} 
 

 
.clearing { 
 
    clear: both; 
 
}

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

出典

2017-01-12 21:46:07 Johannes

これを混乱させるいくつかの追加の時間がありました。 – jonbon

clearfixを<hr />で上書きすることはできますか？

答えて

関連する問題