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

Posted 2023-03-06

【中文标题】如何在 div 中并排放置图像？ （wordpress）

【英文标题】：How do I place images side by side in div? (wordpress)

【发布时间】：2013-06-05 02:20:12

【问题描述】：

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

【问题讨论】：

并排显示应该display 是inlines 之一，比如display:inline？

【参考方案1】：

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

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

两种选择：

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

【讨论】：

好的，成功添加了您提到的更改。但我一直在尝试在 2 个垂直图像和水平图像之间添加一些空间，但似乎没有任何效果。由于某种原因，我没有显示 7px 边距。

那是因为那些 div 是浮动的（他们不知道自己的高度）。您可以通过在图像后添加带有 clear:both; 的 div 来解决此问题。不过我不明白，为什么要将图像包装在 div 中，为什么不只是浮动图像？

这似乎是唯一一种将图像样式设置为与内容中的文本具有不同宽度的方法。除非有更好的方法？

只需在样式表中使用img 而不是.image 并添加一个额外的div

由于某种原因，尽管我的代码如下：.content img margin: 7px 0px !important; width: 905px !important;

【参考方案2】：

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