Html 左、中、右对齐同一行底部的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5011059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left, center, and right align divs on bottom of same line
提问by jrdioko
I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I'd like to left-align one (all the way to the left), right-align another (all the way to the right), and center the third (in the middle of the containing div, the whole page in this case).
我想在同一行显示三个 div。三者中的每一个都有不同的宽度和高度，它们不是直文本。我想左对齐一个（一直向左），右对齐另一个（一直向右），并将第三个居中（在包含 div 的中间，在这种情况下是整个页面）。
In addition, I'd like the three divs to be vertically aligned to the bottom of the containing div. The solution I have vertically aligns them to the top of the containing div.
此外，我希望三个 div 与包含 div 的底部垂直对齐。我的解决方案将它们垂直对齐到包含 div 的顶部。
What is the best way to handle this?
处理这个问题的最佳方法是什么？
回答by Damien-Wright
By setting your container div to position:relativeand the child divs to position:absoluteyou can absolute position the divs within the confines of the container.
通过将容器 div 设置为position:relative和子 div 设置为，position:absolute您可以将 div 绝对定位在容器范围内。
This makes it easy, as you can use bottom:0pxto align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.
这很容易，因为您可以使用bottom:0px将所有内容垂直对齐到容器底部，然后使用左/右样式沿水平轴定位。
I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/and the code follows:
我设置了一个有效的 jsFiddle：http: //jsfiddle.net/Damien_at_SF/KM7sQ/5/，代码如下：
HTML:
HTML：
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
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;
}
Note: For the "center" div, the margin-left = 1/2 the width of the div :)
注意：对于“中心”div，margin-left = div 宽度的 1/2 :)
Hope that helps :)
希望有帮助:)
回答by thirtydot
My technique is similar to @Damien-at-SF:
我的技术类似于@Damien-at-SF：
I tried to rigorously demonstrate all the requirements you asked for.
我试图严格证明你要求的所有要求。
HTML:
HTML：
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
CSS:
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
}
回答by Babiker
To make your center div elastic, you could do something like:
为了使您的中心 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>
回答by FoulFoot
A further enhancement to the first answer:
第一个答案的进一步增强：
In the "center" div CSS, you need to add:
在“中心”div CSS 中，您需要添加：
text-align:center;
In the "right" div CSS, you need to add:
在“正确”的 div CSS 中，您需要添加：
text-align:right;
... to perfectly achieve left/center/right aligning.
...完美实现左/中/右对齐。
回答by Penny Liu
You can use align-items: flex-endto make the flexbox items aligned vertically at the bottom.
您可以使用align-items: flex-end使 flexbox 项目在底部垂直对齐。
.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>回答by Satya
Set position: relativeon the containing div, set position: relativeon your 3 divs, and set the bottomattribute of the 3 divs to 0:
设置position: relative上包含分区，设置position: relative你的3个div的，并设置bottom了3周到的div的属性0：
bottom: 0
