jquery - 试图让最右边的 div 仅使用 CSS 对齐到底部

Question

我有一些 html 用于在 ASP.Net 页面的同一行中显示 3 个 div。虽然 div 连续显示，但问题是第三个 div(最右边的 div)位于行的顶部，我想让它与行底部对齐。

左边div(第一个div)和中间div(第二个div)的内容不是固定的，可以设置为任意图片，也就是说这两个div的高度是不固定的。我在这2个div中模拟了图片内容，添加了一个一定高度和宽度的div，也在最右边的div中模拟了一些内容。

是否可以使用 CSS 执行此操作，如果可以，我该怎么做？我不想使用表格元素，而只想在我的 html 中使用 div。

我在 jsbin 也有这个:http://jsbin.com/yovukinu/2/edit?html,output

 <div style="float: left; text-align: left;
           margin: 0 auto; padding:0px;" id="divLogo">
        <!--some image i.e. img content goes here-->
      <div style='height:120px;width:250px;border:solid 1px green'>IMAGE CONTENT  goes here </div>
 </div>

<div style="float: left; margin-left:100px; " id="divTopAd" runat="server"  >
      <!--some image i.e. img content goes here-->
    <div style='height:240px;width:310px;border:solid 1px red'>IMAGE CONTENT  goes here </div>
</div>

<div style="float:right;margin-right:15px; margin-bottom:4px;padding:0px;"
       id="divRS">
    <!--some non-image content goes here-->
   <div style='font-weight:bold; height:30px;border:solid 1px yellow'> Some Non-Image Content </div>
</div>
<div style='clear:both'>/div>

这显示在下面的屏幕截图中。

更新 1:您可以在此 URL 查看建议的答案:http://jsbin.com/yovukinu/6/edit?html,output .请注意，如果在 div CSS 中使用表格类型显示，则需要删除 CSS float 。

更新 2: 我找到了另一个使用 jQuery 的答案，这使得上面的 html 也可以在 IE 7 中工作，否则可以使用标记的答案，但它在 IE 7 中不起作用。我使用了遵循 jQuery 使其在 IE7 和所有其他浏览器中工作。

在这个 jQuery 中，我得到所有 3 个 div 中的最大高度， 然后将最右边的 div 的上边距设置为 (最大高度 - RightMostDiv 的高度)。 jQuery 在动态调整 CSS 方面非常出色且非常强大，这就是我在这里所做的。

您可以在这个 URL 上看到这个 Action :http://jsbin.com/yovukinu/5/edit?html,output (确保在通过拖动“输出” Pane 的左边框使“输出” Pane 足够宽之后单击“使用 JS 运行”按钮，否则您将看不到它的实际效果)

<script type="text/javascript">
$(document).ready(function () {
    var div1 = $("#divLogo");
    var div2 = $("div[id*='divTopAd']");
    var div3 = $("#divRS");
    var ht1 = 0;
    if (div1 != null) {
        ht1 = div1.height();
        if(ht1 == null)
        {
            ht1 = 0;
        }
    }

    var ht2 = 0;
    if (div2 != null) {
        ht2 = div2.height();
        if (ht2== null) {
            ht2 = 0;
        }
    }
    var ht3 = 0;
    if (div3 != null) {
        ht3 = div3.height();
        if (ht3 == null) {
            ht3 = 0;
        }
    }
    var maxht = 0;
    if(ht1 >= ht2)
    {
        maxht = ht1;
    }
    else
    {
        maxht = ht2;
    }
    if(maxht < ht3)
    {
        maxht = ht3;
    }

    if (maxht > (ht3 + 10) && div3 != null)
    { div3.css("margin-top", (maxht - ht3) + "px");  }
  });
</script>

Answer 1

不是表格元素，但您可以使用 display: table 设置包装器 div，并将 display:table-cell 设置为这 3 个 div，就像使用它们一样表格单元格。

编辑:

在表格单元格中你可以使用垂直对齐