如何在div中并排放置图像？ （WordPress的）

Question

我一直在使用here中的代码，但是因为我需要将我的图像包装在div中，所以即使我将选择器更改为图像也不起作用。不得不在div中包装图像以使其与文本具有不同的宽度。

这就是我在函数中将我的图像包装在div中的原因：

<?php

function breezer_addDivToImage( $content ) {

   // A regular expression of what to look for.
   $pattern = '/(<img([^>]*)>)/i';
   // What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
   $replacement = '<div class="image">$1</div>';

   // run preg_replace() on the $content
   $content = preg_replace( $pattern, $replacement, $content );

   // return the processed content
   return $content;
}

add_filter( 'the_content', 'breezer_addDivToImage' );

?>

这是关于它的CSS：

#image {
        margin: 0px auto 24px !important;
        float: left !important;
    display: block;
}
#image:after { clear: both; }
#image:before, .halfeach:after { content: ""; display: table; }
p #image img { width: 49%; margin: 0; }
p #image a:first-child img { float: left; }
p #image a:last-child img { float: right; }

我有一个帖子here的示例。

THE EDITED CSS：

    .alignright {
    float: right;
    margin: 0 0 50px 0;
    display: inline-block;
}
.alignleft {
    float: left;
    margin: 0 0 50px 0;
    display: inline-block;
}
a img.alignright {
    float: right;
    margin: 0 0 50px 0;
    display: inline-block;
}
a img.alignleft {
    float: left;
    margin: 0 0 50px 0;
    display: inline-block;
}
#page-container .image {
    margin: 7px 0px !important;
}

Answer 1

你的容器太小了，图像不能放在彼此旁边，这就是它们被推倒的原因。

其次，您使用的是课程.image，但您在CSS中使用了ID #image，因此也无法使用。所以改变它。

两个选项：

• 确保您的图片宽度为50％（如果是2张图片）
• 使您的内容容器更大，这样两个图像都可以放在彼此旁边。

Answer 2

你需要浮动：左边两个图像，宽度：50％图像类