最后!获取图像以在WordPress中并排坐下

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/11643.html

你有没有尝试过两张图片在WordPress中并排坐着?它驱使你疯了吗?如果是这样,你并不孤单.这让我疯狂了很多次.

好消息是,它可能不会像过去那样疯狂.

坏消息是,上面的好消息实际上无法在您的情况下适用.

不担心,还有更好的消息-如果最简单的方法没有碰巧为您工作,我们还有以下方法.


  • 4个不同旁边图像的不同方法

    1. 做法没有任何方法
    2. 内置的方法
    3. 手动CSS方法
    4. 使用列

  • 在您的编辑器中删除了图像

4个不同的双侧图像方法

我们为您有四种基本方法.

下面的第一和第二种方法,而最简单,从未真正用于在WordPress中工作,甚至现在他们可能不起作用.

所以我们会给你一些替代方法.

也是可以使用这些替代方法获得更多控制,因此您甚至可能希望选择这些解决方案以开始.

1.做法的做法

显然,它不会比一无所做的更容易,这就是这种方法所需的.

简单地将您的图像并排放入编辑器中.

如果此方法适用于您(可能不会),那么图像将并排出来,如下所示.请注意,图像之间没有空间.

no-space

如上所述,这种简单的方法似乎从未在之前工作过.或者至少在我尝试时,它从未如此.它从未为任何我认识的人工作.所以我猜它不应该.

最近,它实际上为我工作.所以也许有些东西得到了改善.或者也许我尝试过的主题是更灵活的.(我试了几个.)

我真的很确定.它并不重要.

如果它适用于您,那么它可以工作.如果没有,我不会花很多时间担心它.只需继续前进到另一种方法.

2.内置方法

我们将调用此方法中内置的.它略微复杂于第一个方法,但只要图像的大小允许它,它应该在图像之间放置一些空间而不是一起运行它们.(可能太多了.我们稍后会处理.)

简单地,您可以通过单击按钮或选择选项来通过WordPress本身对齐图像.

有两种方法可以实现这一点.

a.编辑器上的按钮

将图像导入编辑器后,只需使用Visual Editor模式中的"对齐"按钮.使用左对齐的第一个图像并右对齐为第二图像.

align-with-editor-cursor

b.媒体库中的选项

您可以通过媒体库中的选项进行基本相同的事情.单击编辑器中的媒体按钮时,要将照片导入帖子,请在插入后,您会注意到右侧底部附近的一些选项.

media-library

选择第一个图像的左对齐,并右对齐为第二图像.

是否选择上面的第一个或第二种方法,您的图像应该像以下类似的东西.

EDITOR-side-by-side-images

您将注意到两种图像之间存在相当数量的空间.空间量将由图像的大小确定.显然,它们越小,它们之间的空间越多.(当然,如果它们太大,那么它们就不会有足够的空间来配合并排配合.)

再次,即使您的图像足够小,也有机会使用此方法对您有效.如果是这样,请不要诅咒它.只是继续前进.

3.手动CSS方法

作为名称表示,此方法将您手动插入一些CSS代码.此方法还将在您的图像之间提供多种空间的控制.

实际上有许多方法可以实现这种方法.我们将多次出现两种选择.

a.在线CSS

使用此方法将CSS样式放入图像代码中.

转到编辑器中的"文本"选项卡(HTML代码部分),并找到已插入的图像的代码.

更有可能,每个图像都有两部分.您将有链接它的代码.它将开始如此:

<a href="http://mysite.com/uncat....>

然后,您将拥有删除图像的代码.它将开始如此:

<img ….>

img 之后,将以下CSS代码放在

style="float: left; margin-right: 5px;"

完全,它应该如下所示:

<img style="float: left; margin-right: 5px;" ….

这将将图像推向左侧,并将5px放在图像的右侧.如果您愿意,您可以增加它.

与第二图像完全相同.如果你漂浮到一个左侧,它将在第一个旁边排队.但是,由于第一个有一个5px余量(如果你改变它),那么它不会对它运行.

最终产品应该看起来像这样(再次,取决于图像的大小).

CSS-side-by-side-images

b.使用具有CSS

的div

另一个类似的选项是使用CSS,但是不是将代码放入图像代码本身,而是用 div 包装每个图像,然后您样式 div 在你的样式表中.

首先,为 div 创建一个唯一的"类"名称,也可能像"并排".然后将代码包装为像这样的第一张图像:

<div class="side-by-side">
<a href="http://mysite.com....>  (include ALL the code for the image here)
</div>

对第二个图像执行相同的操作.

现在我们将创建"并排"类的风格,通过主题中的css文件.(外观>编辑器>样式表- CSS.Style)

当然,如果你要开始永久改变事情,那么创建一个孩子主题总是一个好主题.

在您的样式表中放置以下代码.

.side-by-side { float: left; margin-right: 5px }

那是它.您应该在上面的部分中获得结果.

4.使用列

最终方法是使用列插件.

列插件将让您将发布划分为不同的列-例如,帖子的每一半都是两个列.或者您可以将其分成两列,其中一个是三分之一的宽度,另一个是宽度等三分之二.

那里有许多列插件.短路ultimate插件是一个.

安装插件后,您可以通过短码铺设两列.每列都会占用空间的一半.

在下面的示例中,您将把每个图像放在哪里"......这里的图像......"

[one_half] … image here … [/one_half]
[one_half] … image here … [/one_half]

例如,以下是短路内的一个图像.

shortcodes

以相同的方式做第二个图像.

当然,结果是双侧的两个图像.

shortcode-result

在编辑器中删除图像

要注意的一件事是您可能会发现您的图像看起来以各种各样的方式搞砸了上面的一些解决方案.

messed-up-in-editor

对此没有任何解决方案.只要他们在网站前端转而确定,这就是重要的.

但是,我会在各种浏览器中检查一些东西.此外,当然,您可能希望看到事情看起来如何在移动设备上.

很多东西,包括您的主题,可以参加已发布页面的最终结果.

然而,希望以上的解​​决方案至少为您工作,而且只是试图让图像以并排坐着的疯狂日子将结束.

13

发表回复