Question

我希望能够将图像插入Wordpress帖子并让我的布局左右对齐。我遇到的问题是nth-child(even)和nth-child(odd)的css伪选择器从父级开始计数，使<P>标记成为我的图像的父级。

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>

如何制作，以便插入的图像在页面内左右均匀分布？

*编辑：http://jsfiddle.net/udxzs5jj/

Answer 1

应该有一个CSS解决方案，我敢肯定，如果我抓得太久，我甚至可能想出它。

任何想出它的人都有一个比下面更好的解决方案......

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

如何在wordpress post

1 个答案: