1

我一直在使用这里的代码，但是自从我需要将图像包装在一个 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; }

我在这里有一个示例帖子。

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

2 回答 2

0

您的容器太小，图像无法彼此相邻，这就是它们被推下的原因。

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

两种选择：

  • 确保您的图片是宽度的 50%（如果是 2 张图片）
  • 使您的内容容器更大，以便两个图像彼此相邻。
于 2013-06-09T05:42:37.263 回答
0

您需要为两个图像设置 float:left 并为图像类提供 width:50%

于 2013-06-09T10:31:02.410 回答