html - 将箭头图像直接放在段落中的句子之后

Question

我有一个箭头图像，需要紧跟在每个段落的最后一句话之后。此图像被需要链接到另一个页面的 href 包围。我无法弄清楚如何让这个箭头自动定位在句号旁边(相对于一直向左或向右对齐到边缘。)使用背景图像对我来说并不适用，因为图像周围有 href。我知道有多种方法可以链接一个 div，但如果可能的话，我宁愿不要那样处理。

这是实时代码:http://codepen.io/trevoray/pen/LVxYrv

HTML:

<div class="column-4-layout">
    <div class="left-column">
        <div class="column-container"> <a href="/renderContent/about/vp/vision.asp"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/financialPolicy-spl.jpg" /></a> 
             <h2>Vision and Policies</h2> 
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque ac nunc eu placerat. Sed vulputate iaculis est vitae gravida. Praesent accumsan leo dapibus aliquam interdum. Vestibulum quis nisl volutpat, tempus metus id, scelerisque erat. Suspendisse sed vestibulum magna. Maecenas dignissim, neque ac accumsan molestie, eros felis sagittis sem, sed tempus nunc turpis sed ex. Praesent elit diam, bibendum sed aliquam vel, sollicitudin at turpis. Phasellus sagittis maximus vehicula. Donec vulputate fermentum ligula nec efficitur. Ut magna libero, pulvinar porttitor rutrum et, bibendum vitae libero. Phasellus ac elementum diam. Praesent scelerisque dui id nunc congue semper. <a href="/renderContent/about/vp/vision.asp"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/more-arrow.gif" width="15" /></a>
            </P>
        </div>
        <div class="column-container"> <a href="/renderContent/about/vp/vision.asp"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/financialPolicy-spl.jpg" /></a> 
             <h2>Best Practices</h2> 
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque ac nunc eu placerat. Sed vulputate iaculis est vitae gravida. Praesent accumsan leo dapibus aliquam interdum. Vestibulum quis nisl volutpat, tempus metus id, scelerisque erat. Suspendisse sed vestibulum magna. <a href="/renderContent/about/vp/vision.asp"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/more-arrow.gif" width="15" /></a>
            </P>
        </div>
    </div>
</div>
</div>

CSS:

.column-4-layout {
    color:#565657;
    margin-bottom:100px;
    padding-left:25px;
    padding-right:25px;
}
.column-4-layout .column-container {
    width:475px;
    margin-top: 50px;
    min-height:240px;
}
.tall-column-4 .column-container {
    margin-top:40px;
    min-height:0;
    !important;
}
.column-4-layout .column-container img {
    width:227px;
    padding-right:15px;
    padding-bottom:50px;
    float:left;
}
.column-4-layout .column-container p img {
    width:auto;
    float:right;
    padding-top:5px;
    margin-right:10px;
    display:inline-block;
}
.column-4-layout .left-column {
    float:left;
}
.column-4-layout .left-column .column-container:first-child {
    margin-top:0px;
}
.column-4-layout .right-column {
    float:right;
}
.column-4-layout .right-column .column-container:first-child {
    margin-top:0px;
}

Answer 1

给 anchor display: inline-block。

a{
     display: inline-block;
     vertical-align: middle;
}

并从 p 标签的 anchor 标签内的 img 标签中删除不必要的填充。

要使用的确切 CSS 是:

.column-4-layout .column-container p a img {
    padding: 0;
}

 .column-4-layout .column-container p a{
    display: inline-block;
    vertical-align: middle;
}

Working Fiddle