两个 DIV 并排并在其底部垂直对齐答案

【问题标题】：two DIV side by side and aligned vertically at their bottom两个 DIV 并排并在其底部垂直对齐
【发布时间】：2018-04-09 21:41:51
【问题描述】：

我需要将两个 DIV 并排放置并在其底部垂直对齐。

橙色 div 没有宽度或高度。它可以根据他的内容而增长
我应该可以使用绿色 div 的内边距和边距
我想要一个不使用 javascript 的解决方案

【问题讨论】：

我能想到的唯一办法就是用table，用valign。
最简单的方法是将流体内容保持在橙色 div 中，将两个 div 放在一个表格中，并使用 valign bottom 将两个 div 保持在底部，无论它有多大橙色 div 得到。这可以用纯 css 完成，但表格是最简单的方法。
@AdamFordham，简单！= 最佳。恕我直言，使用表格进行布局是草率的编码。 SO 是一个自我调节的社区，只要遵守规则，发布关键 cmets 并没有错。事实上，我下面的两个 cmets 只是事实陈述。一个不遵循 OP 规定的标准，另一个根本不起作用。
@Sparky672，AdamFordham 的第一条评论在 SO 上占有一席之地。将我的 2 个 div 与表格对齐是一种可能的解决方案。也许它不是最好的，但现在它是我发现使它工作的唯一方法。如果有DIV的解决方案，我一定会试一试！
@AlexandreJobin，也许你错过了下面的三十点的纯 CSS 解决方案。

标签： css html

【解决方案1】：

见：http://jsfiddle.net/thirtydot/J9eds/

我已将display: inline-block 与vertical-align: bottom 结合使用。

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：

#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;
}

【讨论】：

我一直想更好地使用display 属性，用于诸如此类的目的。谢谢
我每次都喜欢你的解决方案 :)

【解决方案2】：

不是 100% 肯定，但这样的事情应该可以工作：

<div class="wrapper">
    <div class="orange"></div>
    <div class="green"></div>
</div>

div.wrapper div {
    position: relative;
    float: left;
    bottom: 0px;
}

甚至可能不需要浮动。

【讨论】：

使用绝对位置并去掉浮动

【解决方案3】：

这是一些有趣的练习 :) 它可能不是最好的答案，但它应该可以完成工作。

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:

td
{
    vertical-align:bottom;
}

#div3
{
    border:solid 5px blue;
    float:left;
}
#div4
{
    width:50px;
    height:20px;
    border:solid 5px red;
    float:right;
}

参见jsfiddle 中的代码。如果您愿意，可以为 div 添加边距

【讨论】：

不是我的反对意见，但您可能因为使用表格进行布局而得到它。
这是实现 v-align css 的简单方法。为什么当其他人甚至不工作时，我的人却被否决了？大声笑
使用它们仍然受支持的表没有任何问题，令人惊讶的是，它们正在大量使用它们的网站。
也许有人过得很糟糕。我已经让你平衡了。
@Adam，也许我之前对你太苛刻了，因为在这种情况下建议一张桌子是最好的解决方案。但是，您最后的评论不是很可信……“桌子卷土重来”？

【解决方案4】：

我相信你会得到更好的东西，但开始这似乎工作。在 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; 
}

在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>

我认为您需要第二个框的绝对左侧位置。

【讨论】：

他明确表示橙色框没有任何宽度或高度。
是的，我看到了。这就是为什么我将高度设置为自动。但是除非有一些分页符，否则没有看到没有宽度的方法

【解决方案5】：

对我有用的是将这种样式应用于两个 div：

.bottom-align { 垂直对齐：底部；显示：内联块；浮动：无； }

然后在两个 div 之间我必须通过添加空白注释来删除伪空间：

</div><!-- ---><div>

【讨论】：

【解决方案6】：

https://jsfiddle.net/panosang/96bnt3xa/

经过几个小时的工作和头疼的厉害，我认为完美的解决方案是添加一些 margin-botton 和 margin-top 元素。

我真的很讨厌每次都在我的 CSS 文件中添加特定像素或更改百分比，但我发现它是解决我问题的完美解决方案。

我使用<table> 代替<div>，但它也适用于<div>。

【讨论】：