How do I position images left and right in wordpress post

2 Views

I want to be able to insert images into a WordPress post and have my layout position them left and right. The problem I’m encountering is that the css pseudo selector for nth-child(even) and nth-child(odd) starts counting from the parent, making the <P> tag the parent for my images. 

img{
    position: relative;
    max-width: 480px;
    margin-top: 8px;
    margin-bottom: 8px;
}

div img:nth-child(odd){
    position: relative;
    left: -240px;
    float: left;
    margin-right: -224px;
}

div img:nth-child(even){
    position: relative;
    right: -240px;
    float: right;
    margin-left: -224px;
}

<div class="content">
    <div class="col-12">
        <h1>Heading</h1>
        <p><img src="image.jpg" alt="image">Quisque porttitor risus dapibus augue interdum tincidunt. Nulla facilisi. Curabitur malesuada eleifend egestas. Proin vitae euismod lectus. Proin pretium est dolor. Donec finibus lorem nunc, vel rhoncus velit feugiat eu. Maecenas vel dui elit. Fusce feugiat massa quis magna euismod aliquam. Vivamus eget malesuada eros, a placerat nibh. Vestibulum faucibus tortor ac velit pharetra accumsan. Duis id neque lorem. Donec in varius quam, a pulvinar lorem. Suspendisse fringilla aliquam augue sit amet molestie. <img src="image2.jpg" alt="image2"></p>
        <h2>heading</h2>
        <p>Quisque porttitor risus dapibus augue interdum tincidunt. Nulla facilisi. Curabitur malesuada eleifend egestas. Proin vitae euismod lectus. Proin pretium est dolor. Donec finibus lorem nunc, vel rhoncus velit feugiat eu. Maecenas vel dui elit. Fusce feugiat massa quis magna euismod aliquam. Vivamus eget malesuada eros, a placerat nibh. Vestibulum faucibus tortor ac velit pharetra accumsan. Duis id neque lorem. Donec in varius quam, a pulvinar lorem. Suspendisse fringilla aliquam augue sit amet molestie. </p>
        <h2>Heading</h2>
        <p>Quisque porttitor risus dapibus augue interdum tincidunt. Nulla facilisi. Curabitur malesuada eleifend egestas. Proin vitae euismod lectus. Proin pretium est dolor. Donec finibus lorem nunc, vel rhoncus velit feugiat eu. Maecenas vel dui elit. Fusce feugiat massa quis magna euismod aliquam. Vivamus eget malesuada eros, a placerat nibh. Vestibulum faucibus tortor ac velit pharetra accumsan. Duis id neque lorem. Donec in varius quam, a pulvinar lorem. Suspendisse fringilla aliquam augue sit amet molestie.<img src="image3" alt="image3"></p>
    </div>
</div>

How to I make it so that inserted images are evenly distributed left and right inside page?

Read More

*edit: http://jsfiddle.net/udxzs5jj/

Post Views: 2

Related posts

1 comment

  1. There ought to be a CSS solution to this and I’m sure if I scratch my head long enough I might even come up with it.

    Anyone who does come up with it has a better solution that the one below…

    CSS

    img.left {
    position: relative;
    left: -240px;
    float: left;
    margin-right: -224px;
}

img.right {
    position: relative;
    right: -240px;
    float: right;
    margin-left: -224px;
}

    Javascript

    var images = document.getElementsByTagName('img');

var i;

for (i = 0; i < images.length; i = i +2) {
images[i].classList.add('right');
}

for (i = 1; i < images.length; i = i +2) {
images[i].classList.add('left');
}

Comments are closed.