사이드 바 위젯을 서로의 아래에 잘 배치하십시오.

Question

다음과 같은 콘텐츠 사이드 바 레이아웃에 문제가 있습니다.

우리는 A, B, C 및 D의 네 개의 div가 있습니다. A와 C는 텍스트와 이미지 (내용)가 있으며 왼쪽에 배치해야합니다. B와 D는 링크, 검색 양식 등의 목록입니다 - 사이드 바 위젯 - 오른쪽에 배치해야합니다.

div는 HTML의 A, B, C, D 순서로 표시해야합니다. 왜냐하면 작은 화면에서 순서를 지정하기 때문입니다. 이처럼 사이드 바에서 빠른 링크 모음이 거의 맨 위에 표시되고 사용자가 스크롤 할 필요가 없습니다.

그러나 이것은 우리가 사이드 바를 가지고있는 큰 화면에서의 위치 결정에 문제를 일으 킵니다. div B의 높이가 div A의 높이보다 낮고 div B가 div C 이후에 이되어야하므로 div D가 너무 낮게 배치됩니다. 아래의 스 니펫에서 직접 확인하십시오. div B 바로 아래에서 div D를 시작하고 싶습니다.

div A의 정확한 높이를 알고 있지만 다른 div는 유연합니다. 모든 div의 너비가 지정됩니다. 이 divs 위치를 멋지게 만드는 순수한 CSS 방법이 있습니까? 필요한 경우 JavaScript를 사용하지 않을 것입니다. 당연히 크로스 브라우저를 사용해야합니다.

나는 CSS 열을 사용하는 것에 대해 생각했지만 사이드 바가 더 적게 필요합니다.

다른 화면 크기에 대한 요소의 순서를 변경하는 방법이 있다면 효과가 있습니다. 하지만 JavaScript가 없으면 이것이 가능하지 않을까합니다.

div#container { 
 
    width: 100%; 
 
} 
 

 
div#container div { 
 
    margin-bottom: 20px; 
 
} 
 

 
div.left { 
 
    float: left; 
 
    width: 70%; 
 
} 
 

 
div.right { 
 
    float: right; 
 
    width: 26%; 
 
} 
 

 
div#div-a { 
 
    height: 100px; 
 
    background-color: #000; 
 
} 
 
div#div-b { 
 
    height: 60px; 
 
    background-color: #f00; 
 
} 
 
div#div-c { 
 
    height: 200px; 
 
    background-color: #0f0; 
 
} 
 
div#div-d { 
 
    height: 120px; 
 
    background-color: #00f; 
 
}

<div id="container"> 
 
    <div id="div-a" class="left"></div> 
 
    <div id="div-b" class="right"></div> 
 
    <div id="div-c" class="left"></div> 
 
    <div id="div-d" class="right"></div> 
 
</div>

Answer 1

것은이 (float: right를 제거하고 .right에 대한 display: inline-block와 20 픽셀 왼쪽 여백을 사용하여)보십시오 :

div.right { 
    /* float: right; */ 
    width: 26%; 
    display: inline-block; 
    margin-left: 20px; 
}