对齐另一个部分

Question

如何对齐与其他部分相邻的另一个部分的两个部分与其他两个部分合并，而不使用浮动？

更新： 我的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; 
} 

现在似乎很好地工作。就我个人而言，我认为这种方式比使用float更容易控制元素。

任何意见表示赞赏。 我希望它可能对某人有用:)。

Answer 1

这是您尝试使用的布局吗？

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

如果是这样你可以用flexbox，或者使用inline-block的作为图莎尔提到的......但是请注意这将如何寻找在移动设备上做。