對齊另一個部分

如何對齊與其他部分相鄰的另一個部分的兩個部分與其他兩個部分合並，而不使用浮動？對齊另一個部分

更新： 我的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更容易控制元素。

任何意見表示讚賞。我希望它可能對某人有用:)。

來源

2014-06-20 user1515594

我想說明一個圖像，但我的代表太低:) – user1515594

你可以使用display：inline-block – Tushar

如果你用你試過的代碼的例子編輯你的問題會很有用，甚至是一個鏈接到codepen或其他編碼操作 – Ruskin

這是您嘗試使用的佈局嗎？

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

如果是這樣你可以用flexbox，或者使用inline-block的作爲圖莎爾提到的......但是請注意這將如何尋找在移動設備上做。

來源

2014-06-20 08:35:44 Ruskin

我會嘗試這個，並感謝有關移動外觀的頭。 – user1515594

使用flexbox！這是未來的佈局方法！對於移動設備，只需將所有內容垂直堆疊即可。 – Michael

對齊另一個部分

回答

相關問題