CSS 将 div 与其容器底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5150411/
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
align divs to the bottom of their container
提问by pstanton
I figured this would be simple, I need to align both of the inside divs (green and blue) to the bottom of their container (red). I'm hoping to not use absolute positioning and i need it to be ie6,7,8 ff chrome safari etc compatible.
我认为这很简单，我需要将两个内部 div（绿色和蓝色）与容器底部（红色）对齐。我希望不使用绝对定位，我需要它与 ie6,7,8 ff chrome safari 等兼容。
<div style="border:1px solid red;">
<div style="border:1px solid green; width:20px; height:20px; float:left;"></div>
<div style="border:1px solid blue; width:20px; height:30px; float:left;"></div>
<div style="clear:both;"></div>
</div>
i've tried using vertical-alignbut can't find a simple solution.
我试过使用vertical-align但找不到简单的解决方案。
thanks for the help, p.
感谢您的帮助，第。
EDIT here's my attempt at abs pos solution:
编辑这里是我对 abs pos 解决方案的尝试：
<div style="border:1px solid red; position:relative;">
<div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div>
<div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div>
<div style="clear:both;"></div>
</div>
回答by Zoidberg
Why can't you use absolute positioning? Vertical-align does not work (except for tables). Make your container's position: relative. Then absolutely position the internal divs using bottom: 0; Should work like a charm.
为什么不能使用绝对定位？垂直对齐不起作用（表格除外）。使您的容器的位置：相对。然后使用底部绝对定位内部 div: 0; 应该像魅力一样工作。
EDIT By zoidberg (i will update the answer instead)
由 zoidberg 编辑（我将更新答案）
<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;">
<div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div>
<div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div>
</div>
回答by rds
The modern way to do this is with flexbox, adding align-items: flex-end;on the container.
现代方法是使用 flexbox，align-items: flex-end;在容器上添加。
With this content:
有了这个内容：
<div class="Container">
<div>one</div>
<div>two</div>
</div>
Use this style:
使用这种风格：
.Container {
display: flex;
align-items: flex-end;
}
回答by cdonner
I don't like absolute positioning, either, because there is almost always some collateral damage, i.e. unintended side effects. Especially when you are working with a responsive design. There seems to be an alternative - the sandbag technique. By inserting a "helper" element, either in the markup of via CSS, we can push elements down to the bottom of the container. See http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932for examples.
我也不喜欢绝对定位，因为几乎总会有一些附带损害，即意外的副作用。特别是当您使用响应式设计时。似乎还有一种选择——沙袋技术。通过在 via CSS 的标记中插入“helper”元素，我们可以将元素向下推到容器的底部。有关示例，请参阅http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932。
回答by MoralCode
The way I solved this was using flexbox. By using flexbox to layout the contents of your container div, you can have flexbox automatically distribute free space to an item above the one you want to have "stick to the bottom".
我解决这个问题的方法是使用 flexbox。通过使用 flexbox 来布局容器 div 的内容，您可以让 flexbox 自动将可用空间分配给您想要“粘在底部”的项目上方的项目。
For example, say this is your container div with some other block elements inside it, and that the blue box (third one down) is a paragraph and the purple box (last one) is the one you want to have "stick to the bottom".
例如，假设这是您的容器 div，其中包含一些其他块元素，并且蓝色框（向下的第三个）是一个段落，而紫色框（最后一个）是您想要“粘在底部”的那个”。
By setting this layout up with flexbox, you can set flex-grow: 1;on just the paragraph (blue box) and, if it is the only thing with flex-grow: 1;, it will be allocated ALL of the remaining space, pushing the element(s) after it to the bottom of the container like this:
通过使用 flexbox 设置此布局，您可以flex-grow: 1;仅在段落（蓝色框）上进行设置，如果它是唯一的flex-grow: 1;，则将分配所有剩余空间，将其后面的元素推到底部像这样的容器：
(apologies for the terrible, quick-and-dirty graphics)
（为糟糕的、快速和肮脏的图形道歉）
回答by Derek
You can cheat! Say your div is 20px high, place the div at the top of the next container and set
你可以作弊！假设您的 div 高 20px，将 div 放在下一个容器的顶部并设置
position: absolute;
top: -20px;
It may not be semantically clean but does scale with responsive designs
它可能在语义上不干净，但可以通过响应式设计进行扩展
