Question

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

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

a tall orange rect, a short green rect, base aligned

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

Answer 2

不是100％肯定，但这样的事情应该有效：

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

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

甚至可能不需要浮动。

Answer 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中添加边距

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

我认为你需要第二个盒子的绝对左侧位置。

Answer 5

对我来说有用的是将这种风格应用于两个div：

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

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

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

Answer 6

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

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

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

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

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

6 个答案: