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

给锚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;
}

<强> Working Fiddle

Answer 2

找到.column-4-layout .column-container p img并对您的css文件进行以下更改

.column-4-layout .column-container p img {
    display: inline-block;
    float: none;
    margin-right: 10px;
    padding-bottom: 0;
    padding-top: 5px;
    width: auto;
}

更新了您的codepen：http://codepen.io/anon/pen/wagvRg

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

HTML：

CSS：

2 个答案: