仅使用CSS尝试使最右边的div对齐到底部

Question

I have some html for displaying 3 divs within the same row in an ASP.Net page. While the divs show up next to each other in a row, the problem is that the third div ( rightmost div) is positioned at top of row and I would want to make it bottom aligned with the row.

The content within left div ( first div) and center div ( second div) is not constant and can be set to any image, which means the height of these 2 divs is not fixed. I have simulated image content in these 2 divs by adding a div with a certain height and width, and also simulated some content in rightmost div.

Is it possible to do this using CSS, and if yes then how would I do it? I do not want to use a table element, but only divs in my html.

I have this also at 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>

This displays as in screen shot below.

UPDATE 1: You can see the suggested answer in action at this URL: http://jsbin.com/yovukinu/6/edit?html,output . Note that the CSS float needs to be removed if table type display is used in div CSS.

UPDATE 2: I found another answer using jQuery, which makes the above html work in IE 7 also, else the marked answer can be used but it will not work in IE 7. I used the following jQuery to make it work in IE7 and all other browsers.

In this jQuery, I get the maximum height among all the 3 divs, then set the top margin for the rightmost div to (Max. Height - Height of RightMostDiv ) . jQuery is excellent and very powerful for adjusting CSS dynamically, which is what I am doing here.

You can see this in action at this URL: http://jsbin.com/yovukinu/5/edit?html,output (Make sure you click Run with JS button after you make the Output pane wide enough by dragging its left border, else you will not see this in action)

<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

Not table elements, but you could set a wrapper div with display: table and set display:table-cell to those 3 divs to work with them just like with table cells.

EDIT:

In table cell you can use vertical-align

Answer 2

Is it completely necessary you have varying image sizes, else you can add a common class to all div and give a fixed height for all,

if you only three images in a row, set the class to have a width of 32%.