<hr />으로 clearfix를 덮어 쓸 수 있습니까?

현재, 나는 많은 내용물을 감싸고있는 clearfix를 가지고있다. 왼쪽에는 이미지 세트가 있고 오른쪽에는 <hr /> 이미지가 있습니다. 유일한 문제는 때로는 이미지의 균형을 맞추기에 충분한 텍스트가없는 것이므로 <hr />이 이미지와 인라인으로 인출됩니다. 나는 모든 <hr />에 clearfix가 없도록해야합니다. 가능한가?<hr />으로 clearfix를 덮어 쓸 수 있습니까?

이 내 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에는 Minimal, Complete 및 Verifiable Example [here 's how] (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

일부 추가 시간에도이 부분이 엉망이되어 버렸어. 이걸 사용 했어 .specific-place hr {} 그리고 그것을 고쳤어. – jonbon

<hr />으로 clearfix를 덮어 쓸 수 있습니까?

답변

관련 문제