다른 섹션 옆에 섹션 정렬

Question

float를 사용하지 않고 다른 두 섹션을 결합한 높이와 동일한 섹션 옆에 두 섹션을 어떻게 정렬합니까?

업데이트 : 내 HTML은 다음과 같습니다 :이 같은

<div class="header-main"> 
    <div class="header-left"> 
    </div> 
    <div class="header-right"> 
     <div class="cont-top"> 
      <div class="header-top-left"> 
      </div> 
      <div class="header-top-right"> 
      </div> 
     </div> 
     <div class="header-bottom"> 
     </div> 
    </div> 
</div> 

CSS는 :

div.header-left 
{ 
    width:160px; 
    height:182px; 
    display:inline-block; 
} 

div.header-right 
{ 
    width:730px; 
    height:182px; 
    display:inline-block; 
    vertical-align:top; 
} 

div.header-top 
{ 
    width:730px; 
    height:125px; 
} 

div.header-top-left 
{ 
    width:340px; 
    height:123px; 
    display:inline-block; 
    vertical-align:top; 
} 

div.header-top-right 
{ 
    display:inline-block; 
    width:380px; 
    height:123px; 
    vertical-align:top; 
    text-align:right; 
} 

div.header-bottom 
{ 
    width:730px; 
    height:40px; 
} 

지금은 잘 작동하는 것 같다. 개인적으로 나는 플로트를 사용하는 것보다 이런 방식으로 요소를 제어하는 ​​것이 더 쉽다고 생각한다.

모든 의견을 환영합니다. 누군가에게 유용 할 수 있기를 바랍니다 :).

Answer 1

시도한 레이아웃입니까?

### ### 
#1# ### 
### ### 
    #3# 
### ### 
#2# ### 
### ### 

당신이 flexbox 또는 Tushar 언급 ...하지만이 모바일 장치에서 어떻게 표시되는지 고려하시기 바랍니다 인라인 블록을 사용하여 할 수 있도록합니다.