How do I position images left and right in wordpress post


Tags: html,css,wordpress

Problem :

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?

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



Solution :

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');
}

    CSS Howto..

    How to magnify images on hover using purely css? [closed]

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How to optimize this css code? [closed]

    CSS newbie: How to align my link to the right side of the page?

    How to enable overflow scrolling within a Semantic Ui Grid?

    How do I make the text in the next line to be centered and not aligned to the left?

    How to restore color in css after mouse leave?

    How to change size of text input but not textarea in jquery mobile

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    How to use modernizr for border-image

    How to remove and override CSS attribute from parent class?

    bootstrap select show only dropdown-menu on link click without the select button

    How to position images next to text using CSS

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How can I remove “border-top-width” css style?

    How to make hidden div slide down without affecting other elements in same row

    contenteditable does not show pseudoselector :before in safari

    How to make a responsive text inside a bootstrap button

    How to change background on hover for 2 elements using css

    Using Susy, how can I make a div expand to height of tallest sibling?

    How do I get a div to be positioned above an image?

    Css styling without !important - how to do this?

    How to convert a CSS3 2D animatuon to a 3D Transform

    If contains 'string' - set css “visibility:hidden;” - how to?

    How to set width and text-align for button with CSS

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?

    How to align the wizard to the left and right sides?

    How to add background-image onto the first option of a dropdownlist

    How do I implement CSS + JavaScript scripts on specific pages on our Drupal site? [closed]

    How to change the css style for phone and desktop?