html - 将

Question

我正在尝试将我的“阅读更多”与图像的底线对齐，我希望“阅读更多”始终使用 float 定位并与左侧图片的底部线对齐，所以即使我的帖子有几行或多行，我也希望我的阅读更多内容始终与图像行位置在同一行。但是我没有成功地按照我想要的方式进行工作，根据帖子的大小，我总是处于不同的位置。我的 fiddle 有: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 在这里。

请注意，我保留了最后一个，供您引用。并忽略长图片链接，只需简单地从谷歌获取。