如何让两个并排的 div 对齐到底部？

Question

我想要图 2 而不是图 1。在图 1 中，菜单和图像与顶部对齐，但我希望它们与底部对齐。

这是我的 CSS:

 <div id="branding">
      <div class="brand-left"></div>
      <div class="brand-right"></div>
 </div>

#branding {
    display: inline-block;
    width: 100%;
}

.brand-left {
    position: relative;
    float: left;
    width: 730px;
}

.brand-right {
    text-align: right;
    width: 222px;
    float: left;
}

Answer 1

您可以尝试使用 display: flex;

.bottom {
  display: flex;
  bottom: 0;
  left: 0;
  position: fixed;
  width:100%;
 }

.right {
  margin-left: auto;
}

<div class="bottom">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

Answer 2

解决方案 1（使用 flex）

您可以使用 display: flex 实现此行为。您所要做的就是将此规则添加到您的 branding div:

#branding {
    display: flex; /* ADDED */
    align-items: flex-end; /* ADDED */
    width: 100%;
    border: 1px solid green; 
}

这是一个片段

#branding {
    display: flex;
    width: 100%;
    border: 1px solid green;
    align-items: flex-end;
}

#branding > div{
  border: 1px solid blue;
}

.brand-left {
    position: relative;
    float: left;
    width: 730px;
}

.brand-right {
    text-align: right;
    width: 222px;
    float: left;
}

<div id="branding">
        <div class="brand-left">content</div>
        <div class="brand-right">
          <img src="http://senda-arcoiris.info/images/100x100.gif"/>
        </div>
</div>

解决方案 2（使用位置 relative/absolute）

另一个不使用 flex 的解决方案是从子 div 中删除 floats 并将它们定位为绝对。请看下面的片段：

#branding {
    position: absolute;      /* ADDED */
    width: 100%;
    border: 1px solid green;
}

#branding > div{
  position: relative;       /* ADDED */
  display: inline-block;    /* ADDED */
  border: 1px solid blue;
  bottom: 0;
}

.brand-left {
    width: 330px;  /* I changed the width in order to fit in the snippet */
}

.brand-right {
    text-align: right;
    width: 222px;
}

<div id="branding">
        <div class="brand-left">content</div>
        <div class="brand-right">
          <img src="http://senda-arcoiris.info/images/100x100.gif"/>
        </div>
</div>

Answer 3

尝试在您的 .brand-left div

中添加 line-height

Answer 4

你可以试试 flexbox

#branding{
  width:100%;
  display:flex;
  height:250px;
    background-color:green;
    align-items:flex-end;
}




.brand-left {
    position: relative;
    width: 730px;
    height:150px;
    background-color:pink;
}

.brand-right {
    text-align: right;
    width: 222px;
     background-color:blue;
     height:250px;
}

 <div id="branding">
        <div class="brand-left"></div>
        <div class="brand-right"></div>
    </div>

Answer 5

有多种方法可以做到这一点，最终取决于您要实现的目标以及您的项目要求（例如浏览器支持）。也就是说，一种方法是绝对定位您想要底部对齐的元素。

首先，为您的品牌容器分配 position: relative; 属性和值
其次，将您的徽标向右浮动
第三，为您想要底部对齐的容器指定一个 position: absolute; 属性和值

这是一个工作示例：http://codepen.io/mjoanisse/pen/grvBwE

Answer 6

以防万一有兴趣没有display: flex

#branding {
  width: 100%;
}
.brand-left {
  position: relative;
  float: left;
  width: 750px;
  background: #f00;
  min-height: 250px;
}
.brand-left .nav {
  position: absolute;
  bottom: 0px;
  right: 15px;
}
.brand-left .nav li {
  display: inline;
}
.brand-right {
  text-align: right;
  width: 222px;
  float: left;
  background: #ff0;
  min-height: 250px;
}

<div id="branding">
  <div class="brand-left">
    <ul class="nav">
      <li><a href="#">Registration</a>
      </li>
      <li><a href="#">Log In</a>
      </li>
    </ul>
  </div>
  <div class="brand-right"></div>
</div>

如何让两个并排的 div 对齐到底部？

How to have two side by side divs align to bottom?

html

css

positioning

解决方案 1（使用 flex）

解决方案 2（使用位置 relative/absolute）