定位到动态div的底部

Question

This is what I'm trying to achieve

http://i.stack.imgur.com/e9xZa.jpg

I tried this

jsfiddle.net/RUSm3/

but as you can see the date overlaps on the image.

So I added left:215px for the date

jsfiddle.net/9aw29/

It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.

Answer 1

If you have a div like this

<div class="container">
    <div class="date">today</div>
</div>

with this css fragment your date div will be positioned to the bottom right of it's container.

.container {
      position:relative;
    width: 100px;
    height: 180px;
    border: solid 1px black;
}
.date {
        bottom:10px;
        position:absolute;
        right:10px;
    }

You can verify it working here

Answer 2

I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry ), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.

<div class="entry">
  <img [...] />
  <div>
    <h2>Heading</h2>
    <p>Entry text</p>
    <p class="date">[Date]</p>
  </div>
</div>

Answer 3

Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.

<style type="text/css">
    div.entry{
        float: left;
        position: relative;
        width: 40%;
    }
    img.left{
        float: left;
    }   
    div.right{
        float: right;
        display: inline;
        position: absolute;
        height: 100%;
        width: 50%;
    }   
    div.topRight{
    }   
    div.bottomRight{
        position: absolute;
        bottom: 0px;
    }   
</style>




<div class="entry">
  <img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
  <div class="right">
      <div class="topRight">
          Some stuff
      </div>
      <div class="bottomRight">
          Some other stuff
      </div>
  </div>
</div>