左、中、右对齐同一行底部的 div答案

【问题标题】：Left, center, and right align divs on bottom of same line左、中、右对齐同一行底部的 div
【发布时间】：2011-06-28 00:26:49
【问题描述】：

我想在同一行显示三个 div。三者中的每一个都有不同的宽度和高度，并且它们不是直文本。我想左对齐一个（一直向左），右对齐另一个（一直向右），并将第三个居中（在包含 div 的中间，在这种情况下是整个页面)。

此外，我希望三个 div 垂直对齐到包含 div 的底部。我的解决方案将它们垂直对齐到包含 div 的顶部。

处理这个问题的最佳方法是什么？

【问题讨论】：

标签： css html alignment center vertical-alignment

【解决方案1】：

您可以使用align-items: flex-end 使弹性框项目在底部垂直对齐。

.container {
  display: flex;
  height: 300px;
  min-width: 400px;
  background-color: #61a0f8;
  justify-content: space-between;
  align-items: flex-end;
}

.item {
  width: 100px;
  height: 120px;
  background-color: #f08bc3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 140px;
  height: 240px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
</div>

【讨论】：

【解决方案2】：

要使您的中心 div 具有弹性，您可以执行以下操作：

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>

【讨论】：

【解决方案3】：

对第一个答案的进一步增强：

在“center”div CSS中，需要添加：

text-align:center;

在“正确”的 div CSS 中，需要添加：

text-align:right;

...完美实现左/中/右对齐。

【讨论】：

【解决方案4】：

我的技术类似于@Damien-at-SF：

我试图严格证明您提出的所有要求。

Live Demo

HTML：

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS：

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}

【讨论】：

【解决方案5】：

通过将容器 div 设置为 position:relative 并将子 div 设置为 position:absolute，您可以将 div 绝对定位在容器的范围内。

这很容易，因为您可以使用bottom:0px 将所有内容垂直对齐到容器底部，然后使用左/右样式沿水平轴定位。

我设置了一个可以工作的 jsFiddle：http://jsfiddle.net/Damien_at_SF/KM7sQ/5/，代码如下：

HTML：

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS：

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

注意：对于“居中”的 div，margin-left = div 宽度的 1/2 :)

希望有帮助:)

【讨论】：

+1，如果只是因为您发布了与我“相同的想法”，但速度更快。
如果中心 div 的宽度未知或者是动态的怎么办？
如果容器有一个我也想显示的背景怎么办？执行上述操作会导致容器没有高度
又是一个不理解 CSS 的例子；这个问题与position无关。做对或根本不做。

【解决方案6】：

在包含的div上设置position: relative，在你的3个div上设置position: relative，并将3个div的bottom属性设置为0：

bottom: 0

【讨论】：