CSS，如何將兩個div之間的兩個div像漢堡一樣對齊？

Question

如何使左右區域在頂部和底部區域之間對齊？看起來它們雖然具有相同的高度，但並未對齊。請注意，左側和右側的div沒有相同長度的文本。任何人都可以幫助請求。

HTML

<div id="top_area"></div> 
    <div class="left_area">I'm left area, which has longer text</div> 
    <div class="right_area">right area</div> 
    <div id="bottom_area"></div> 

CSS

<style> 
#top_area{ 
    width:550px; 
    height:100px; 
    background-color: orange; 
} 
.left_area{ 
    box-sizing: border-box; 
    display: inline-block; 
    background-color: #ffcc99; 
    width:140px; 
    height:80px; 
    padding-top:30px; 

} 
.right_area{ 
    box-sizing: border-box; 
    display: inline-block; 
    background-color: #ffcc99; 
    width:140px; 
    height:80px; 
    padding-top:30px; 
    margin-left: 15%; 
} 

#bottom_area{ 
    min-height: 80px; 
    text-align: center; 
    padding: 10px; 
background-color: orange; 
    width: 550px; 
    border-radius:5px; 
    display: block !important; 
    text-align: left; 
    vertical-align: bottom; 
} 
</style> 

Answer 1

如果我理解你的需求正確，你需要float的.left-area和.right-areadiv元素。

爲了做到這一點，而不是自己開車瘋了，你應該先添加一個包裝div周圍所有的內容並將其設置爲你想要爲你的內容的最大寬度：

<div class="wrapper"> 
<div id="top_area"></div> 
    <div class="left_area">I'm left area, which has longer text</div> 
    <div class="right_area">right area</div> 
    <div id="bottom_area"></div> 
</div> 

然後，這會讓你的東西更容易從長遠來看，改變寬度單位內元素%而非px：

.wrapper { 
    width: 550px; 
    height: auto; 
} 

.left_area{ 
    width:50%; 
    height:80px; 

} 
.right_area{ 

    width: 50%; 
    height: 80px; 

} 

現在我們^ h我們將更新您的答案，我會更新這個）

我們可以通過float做到這一點，他們都left，和（（）現在）去除任何margin小號 CSS：

.left_area{ 
    box-sizing: border-box; 
    display: inline-block; 
    background-color: #ffcc99; 
    width:50%; 
    height:80px; 
    padding-top:30px; 
    float: left; 

} 
.right_area{ 
    box-sizing: border-box; 
    display: inline-block; 
    width:50%; 
    height:80px; 
    padding-top:30px; 
    /* margin-left: 15%;*/ 
    float: left; 
} 

然後阻止他們坐在最下面的「包子」的頂部添加clear: both;到#bottom_area元素。我還添加了boz-sizing: border-box以確保它與頂部「髮髻」的寬度相同。 border-box確保padding和margin不會增加元素的總寬度。

CSS：

#bottom_area{ 
    min-height: 80px; 
    text-align: center; 
    padding: 10px; 
    background-color: orange; 
    width: 550px; 
    border-radius: 5px; 
    display: block !important; 
    text-align: left; 
    vertical-align: bottom; 
    /* Add the styles below */ 
    clear: both; 
    box-sizing: border-box; 
} 

下面是一個工作Codepen