Question

为了在Wordpress（2014年主题）中并排获得两张图片，我在图像之后添加了一个div来清除，并且它有效：

<a href="/image1.jpg"><img  align="alignleft" src="/image1.jpg" alt="" width="225" height="400" /></a> 

<a href="/image2.jpg"><img align="alignright" src="/image2.jpg" alt="" width="225" height="400" /></a>

<div class="clear"></div>

但是如果我为照片添加标题，左侧的图像会移动到左边距，而不是指定的条目内容div。

[caption id="" align="alignleft" width="302"]<a href="/image1.jpg"><img src="/image1.jpg" alt="" width="225" height="400" /></a> Caption here[/caption]

[caption id="" align="alignright" width="302"]<a href="/image2.jpg"><img src="/image2.jpg" alt="" width="225" height="400" /></a> Caption here[/caption]

<div class="clear"></div>

CSS：

img.alignleft {
float: left;
margin-right: 12px;
}

img.alignright {
float: right;
margin-left: 12px;
}

img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

a img.alignright {
float: right;
margin-left: 12px;
}

a img.alignleft {
float: left;
margin-right: 12px;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.clear {
clear: both;
}

需要调整什么？

Answer 1

当您使用字幕图像时，Wordpress会为您构建一些HTML。有了这个，WordPress也为每个对齐选项都有CSS。

要覆盖这些内容，请将此代码添加到您的子主题style.css：

.wp-caption.alignright {
    float: right !important;
    margin-right: -12px !important;
}

.wp-caption.alignleft {
    float: left !important;
    margin-left: -12px !important;
}

Answer 2

Richer St-Amand是对的。但问题是媒体查询中有两个规则，从主题style.css的第3462行开始：

/* Line 3492 */
.full-width .site-content .wp-caption.alignleft {
    margin-left: -168px;
}
/* Line 3504 */
.full-width .site-content .wp-caption.alignright {
    margin-right: -168px;
}

这个规则很容易被这样的事情覆盖：

.full-width .site-content .wp-caption.alignleft,
.full-width .site-content .wp-caption.alignright {
    margin: 0;
}

在Wordpress中为并排照片添加标题会将一张照片移到左边距

2 个答案: