이후에 오는 요소를 플로팅 일반적인 내용

Question

문제가 있습니다. 다음 마크 업에는 첨부 된 그림 (오른쪽 플로트)과 같이 표시하려는 사용자에 대한 추가 정보가 포함 된 aside-element가 있습니다.

<section> 
    <h2>site title</h2> 
    <p>that's the site's main content</p> 
    <aside> 
     <h3>other stuff</h3> 
     <div>cloud tag</div> 
    </aside> 
</section> 

그러나 h2 요소 앞에 aside 요소를 놓고 오른쪽으로 띄우고 싶지 않습니다. 나는 이것이 효과가있을 것이라는 것을 안다. 그러나 어떻게 든 그것은 나에게 틀린 것처럼 보일 것이다. 검색 엔진은 그것이 중요한 요소가 아니라는 것을 알고 있다는 것을 알 수 있습니다. 왜냐하면 그것이 비공개 요소에 포함되어 있기 때문입니다.

그러나 페이지의 너비가 작을 때 (예 : 더 작은 장치) 제쳐 놓기 요소가 기본 콘텐츠 아래에 머물러 있다는 점도 고려하십시오.

제 질문은 : 마크 업 순서를 조작하지 않고 그림과 같이 옆으로 떠있는 요소가있을 가능성이 있습니까 (도움 div를 추가하는 것이 좋습니다).

이미 감사합니다.

Answer 1

당신은 사업부의 주요 내용을 포장하고 주요 사업부와 옆 요소 모두에 float: left를 추가해야합니다. 그런 다음 적절하게 공백을 넣으려면 margin 속성을 사용하십시오.

HTML

<section> 
    <div class="main"> 
     <h2>site title</h2> 
     <p>that's the site's main content</p> 
    </div> 
    <aside> 
     <h3>other stuff</h3> 
     <div>cloud tag</div> 
    </aside> 
</section> 

CSS

.main { 
    float: left; 
} 
aside { 
    float: left; 
} 

DEMO를 참조하십시오.