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

如果我理解您的需求是正确的，则需要-d float和.left-area .right-area元素。

为了做到这一点而不是让自己发疯，首先应该在所有内容周围添加包装 div，并将其设置为您希望内容的最大宽度：

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

现在我们有了这个，让我们让你的中心div彼此相邻（如果那不是你想要的，请更新你的答案，我会更新）

我们可以.wrapper { width: 550px; height: auto; } .left_area{ width:50%; height:80px; } .right_area{ width: 50%; height: 80px; }同时float和（暂时）删除任何left s 的 CSS：

margin

然后阻止他们坐在底部“bun”的顶部，将.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以确保它与顶部“bun”的宽度相同。 boz-sizing: border-box确保border-box和padding不会增加元素的整体宽度。

<强> CSS：

margin

这是一个有效的Codepen

CSS，如何将两个div之间的两个div对齐，就像一个汉堡包？

1 个答案: