css - 如何在 div 中并排放置图像？ (文字出版社)

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 .

编辑后的 ​​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 张图片)
• 让您的内容容器更大，这样两张图片就可以并排放置。