Html 两个 DIV 并排并在其底部垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8057463/
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
two DIV side by side and aligned vertically at their bottom
提问by Alexandre Jobin
I need two DIV to be put side by side and aligned vertically at their bottom.
我需要两个 DIV 并排放置并在它们的底部垂直对齐。
- The orange div doesn't have a width or height. It can grow depending of his content
- I should be able to use padding and margin of the green div
- I would like to have a solution that doesn't use javascript
- 橙色 div没有 width 或 height。它可以根据他的内容增长
- 我应该能够使用绿色 div 的填充和边距
- 我想要一个不使用 javascript 的解决方案
采纳答案by thirtydot
See:http://jsfiddle.net/thirtydot/J9eds/
见：http : //jsfiddle.net/thirtydot/J9eds/
I've used display: inline-blockcombined with vertical-align: bottom.
我display: inline-block结合使用vertical-align: bottom。
HTML:
HTML：
<div id="container">
<div id="left">
left<br />left<br />left<br />left<br />left<br />left<br />
leftleftleftleftleftleft
</div>
<div id="right"></div>
</div>
CSS:
CSS：
#container {
border: 1px solid red;
float: left;
}
#left, #right {
border: 2px solid red;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
margin: 20px 20px 0 20px;
padding: 20px;
width: 100px;
}
回答by jtfairbank
Not 100% sure, but something like this should work:
不是 100% 肯定，但这样的事情应该有效：
<div class="wrapper">
<div class="orange"></div>
<div class="green"></div>
</div>
div.wrapper div {
position: relative;
float: left;
bottom: 0px;
}
May not even need the float.
甚至可能不需要浮动。
回答by Nick Rolando
This was some fun practice :) Its probably not the best answer, but it should get the job done.
这是一些有趣的练习:) 这可能不是最好的答案，但它应该可以完成工作。
html:
html：
<table>
<tr>
<td>
<div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
</td>
<td>
<div id="div4">nick</div>
</td>
</tr>
</table>
css:
css：
td
{
vertical-align:bottom;
}
#div3
{
border:solid 5px blue;
float:left;
}
#div4
{
width:50px;
height:20px;
border:solid 5px red;
float:right;
}
see code in jsfiddle. add margins to the divs if you'd like
请参阅jsfiddle 中的代码。如果您愿意，可以为 div 添加边距
回答by pdxDaniela
I am sure you'll get something better but to get started this seems to work. in the css sheet
我相信你会得到更好的东西，但开始这似乎有效。在 css 表中
#box1{
background-color:#FFFF99;
width: 350px;
height: auto;
float: left;
position:absolute;
bottom: 0;
}
#box2{
background-color:#CCFF99;
width:350px;
left: 500px;
position: absolute;
bottom: 0;
}
in the html
在html中
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="try2.css" />
</head>
<body>
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
I think you need an absolute left position for the second box.
我认为您需要为第二个框提供绝对的左侧位置。
回答by Rachel S
What worked for me was applying this style to both divs:
对我有用的是将这种样式应用于两个 div：
.bottom-align { vertical-align:bottom; display:inline-block; float:none; }
.底部对齐{垂直对齐：底部；显示：内联块；浮动：无；}
Then between both divs I had to remove the pseudospace by adding a blank comment:
然后在两个 div 之间，我不得不通过添加一个空白注释来删除伪空间：
</div><!-- ---><div>
回答by Panos Angelopoulos
https://jsfiddle.net/panosang/96bnt3xa/
https://jsfiddle.net/panosang/96bnt3xa/
After some hours of working and a terrible headache i think that the perfect solution is to add some margin-bottonand margin-topelements.
工作和头痛得很厉害的几个小时后，我认为完美的解决方案是添加一些margin-botton和margin-top元素。
I really hate to add specific pixels or change percentage each time into my CSS file but i found it as the perfect solution in my problem.
我真的很讨厌每次都在我的 CSS 文件中添加特定像素或更改百分比，但我发现它是我问题的完美解决方案。
I used <table>instead of <div>, but it works with <div>too.
我使用了<table>而不是<div>，但它也适用<div>。
