css - 如何在div中并排放置图片？ (wordpress)

我一直在使用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。

编辑的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;
}

最佳答案

您的容器太小，无法容纳彼此相邻的图像，这就是为什么图像被向下推的原因。

其次，您使用类.image，但是您在CSS中使用ID #image，因此也不起作用。所以改变它。

两种选择：


确保您的图片是宽度的50％（如果有2张图片）
使内容容器更大，以便两个图像彼此相邻。

关于css - 如何在div中并排放置图片？ (wordpress)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17006746/