Place an arrow image immediately after a sentence in a paragraph
I have an arrow image that should immediately follow the last sentence period in each paragraph. This image is surrounded by an href that needs to be linked to another page. I can't figure out how to get this arrow to automatically position itself next to the supply period (versus left or right aligned to the edge). Using a background image doesn't really work for me because of the href around the image. I know there are ways to bind a div, but I'd rather not treat it this way if possible.
Here is the live code: 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;
}
source to share
find .column-4-layout .column-container p img
and do the following changes to your css file
.column-4-layout .column-container p img {
display: inline-block;
float: none;
margin-right: 10px;
padding-bottom: 0;
padding-top: 5px;
width: auto;
}
updated the code: http://codepen.io/anon/pen/wagvRg
source to share
Give a binding display: inline-block
.
a{
display: inline-block;
vertical-align: middle;
}
and remove unnecessary padding from the tag img
that is inside the tag anchor
tag p
.
The exact css to use:
.column-4-layout .column-container p a img {
padding: 0;
}
.column-4-layout .column-container p a{
display: inline-block;
vertical-align: middle;
}
source to share