将<h3></h3>与我的图像问题的底部对齐

Question

我试着把我的“读得更多”和我的图像的底线对齐，我想让“读得更多”--总是用浮动定位，并与左边图片的底部对齐，这样即使我有一篇很少或多行的文章，我也希望我的读的内容总是与图像行的位置一致。但我并没有成功地按照我想要的方式工作，我的职位总是处于不同的位置，这取决于职位的大小。我正在做的事情是：http://jsfiddle.net/ritz/tvJ3j/1/我想做的是：

​

我的html：

<section id="body-container">
            <div id="body"> 
                <div id="body-content">  
                <h1>last Posts</h1>

                <article id="loop-body">
                    <img src="logo.png" />
                    <a href="#">Title 2</a>
                    <p>Post 1</p>
                   <h3 style="float:right;"> Read more> </h3>
                </article>

                <hr/>

                  <article id="loop-body">
                    <img src="logo.png" />
                    <a href="#">Title 2</a>
                    <p>Post 2 with many lines post 2 with many lines post 2 with many lines</p>
                    <h3 style="float:right;"> Read more > </h3>
                </article>
                </div>
            </div>
</section>

我的css：

#body-container{width:100%;height:auto;float:left;  margin:10px 0 0 0;}
#body{width:960px;  margin:0 auto 0 auto;}
#loop-body{height:130px; margin-top:20px;}
#loop-body a{font-family:'bariol_regularregular'; font-size:22px; text-decoration:none; color:#000;}
#body-content{float:left; width:603px;}
#body-content h1{font-family:'bariol_regularregular';  margin-top:15px; font-size:24px;}
#loop-body h3{font-family:'bariol_boldbold'; font-size:14px; float:right;margin-top:5px;}
#loop-body img{float:left; border:1px solid#ccc; width:150px;height:120px; margin-right:20px;}
#loop-body p{font-family:'bariol_regularregular'; font-size: 16px;}

Answer 1

刚做完。

你需要改变你的HTMls结构和一些CSS调整，

HTML：

<article id="loop-body">
      <div class="cContent">
            <a href="#">Title 2</a>
            <p>Post 1</p>                        
      </div>
      <div class="cImage">
            <img src="img.jpg" style="height:130px;width:auto" />
            <h3> Read more> </h3>
      </div>

</article>

CSS：

article{padding:10px;}
.cContent {float:right;width:400px;}
.cImage{position:relative;}
.cImage h3{position:absolute;bottom:0;right:0;margin:0;}

JSFIDDLE在这里。

请注意，我留下了最后一个不动，供你参考。而忽略长图片链接，只是简单地从谷歌获得。

Answer 2

我就是这样做的：

#loop-body{
    position: relative
    width: ...px
    ...
}

#loop-body h3{
    position:absolute;
    bottom: 0;
    right: 0;
    ...
}

Answer 3

我已经解决了你的问题访问链接

#loop-body h3{font-family:'bariol_boldbold'; font-size:14px; right:0; bottom:-15px; position:absolute;}