div 및 hr의 부동 콘텐츠

Question

hr 태그의 내용은 플로팅 요소 주위에 마치 인라인 요소 인 것처럼 흐릅니다 (실제로는 블록 일지라도). 그게 내가 필요하지만 불행히도 hr 두 개의 의사 요소를 제외하고 자식 요소를 가질 수 없습니다.

JsFiddle에이 데모에서 살펴 보자는 : http://jsfiddle.net/P3KEZ/

<div id="right"></div> 
<div class="divider"></div> 
<hr class="divider" /> 

#right{ 
    background: #ffaaaa; 
    width: 200px; 
    height: 300px; 
    float: right 
} 

.divider { 
    background: #4d9d4d; 
    height: 20px; 
    border: none; 
    position: relative; 
} 

.divider:after, .divider:before { 
    content: " "; 
    width: 20%; 
    height: 100%; 
    display: inline-block; 
    position: absolute; 
    background: #a2a2f2; 
    top: 0; 
} 

divider:before { 
    left: 0; 
} 

.divider:after { 
    right: 0; 
} 

내가 실제로 원하는 것은 부동 요소 주위의 내용 흐름 (hr 같이 할)로 요소를 얻는 것입니다뿐만 아니라 적어도 수 있습니다 3 개의 자식 요소 (예 : div).

그럼 질문 : 어떻게 div에서 이러한 동작을 에뮬레이트합니까?

Answer 1

(display: flex없이) 내가 실제로 원하는 것은 (같은 hr 할) 부동 요소 주위의 콘텐츠 흐름 요소를 얻는 것입니다뿐만 아니라 최소 3 개 하위 요소를 (같은 div가 할 수있는) 할 수 있습니다.

그래서 질문입니다 : div에서 이러한 동작을 어떻게 에뮬레이션합니까?

당신은, 블록 요소가 뒤에 을 누워있다 강 overflow 속성의 힘 ... (* 천둥 *)

.divider { 
    /* … */ 
    overflow:hidden; 
} 

일반적으로 수확 떠있는 요소를 원하는 만의 인라인 내용은 부동 요소 옆에 떠 있습니다. 그러나 overflow:hidden으로 변경하면 div과 같은 블록 요소는 부동 요소 옆에 남아있는 공간 만 차지합니다. (실제로 hidden 될 필요가 없습니다 - 기본값 visible 외에 모든 것을이 동작을 트리거, 사람들은 더 나은 실제 사용 사례에 맞게 경우뿐만 아니라 auto 또는 scroll을 사용할 수 있도록.)

여기를 참조하십시오 : http://jsfiddle.net/P3KEZ/1/

를