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

Question

我有一个箭头图像需要紧跟每个段落中最后一句的句号.此图像由需要链接到另一页面的href包围.我无法弄清楚如何让这个箭头自动定位在句子的句子旁边(vs左右对齐到边缘.)因为图像周围的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

给锚点display: inline-block.

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

并从img标记内部的anchor标记中删除不必要的填充p.

要使用的确切css是:

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

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

工作小提琴