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