在 Wordpress 帖子中为文本设置 75% 的宽度和为图像设置 100% 的宽度？

Posted 2023-03-06

【中文标题】在 Wordpress 帖子中为文本设置 75% 的宽度和为图像设置 100% 的宽度？

【英文标题】：Make 75% width for text and 100% for images in Wordpress post?

【发布时间】：2015-11-11 03:00:30

【问题描述】：

我尝试在帖子中设置 75% 的段落宽度，以及 100% 的图像响应宽度。但是，<img> 默认始终位于 <p> 中。

<p>Some texts</p>
<p>Some texts</p>
<p><a><img src="..."></a></p>
<p>Some texts</p>
<p>Some texts</p>

目前，我只能在<img>之外创建.entry-content p max-width: 75%;和<div>。这样系统就不会创建一个<p> 来保存<img>。但这不是最佳做法。

对这个问题有什么想法吗？

这是我预期的布局。

【问题讨论】：

如果<p> 和<img> 总是在第三位，你可以做p:nth-child(3)width:100%;。

是的，我就是这么想的。由于没有父选择器，我无法在包含<img> 的<p> 上创建样式。我现在只能期待纯 javascript 的答案了。

【参考方案1】：

你完全可以用纯 CSS 做到这一点——不需要 JS——这只是数学。考虑到您的段落是容器宽度的 75%，您的图像需要是 100% 的段落宽度 + 25% 的容器宽度缺失。因此，使用此公式，您可以获得图像宽度的正确百分比：

width = ((25/75) + 1) * 100 = 133.3333

这里有一个jsfiddle 来说明这一点。