在Wordpress帖子中，文本的宽度为75％，图像的宽度为100％？

Question

我尝试在帖子中制作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>

目前，我只能制作.entry-content p {max-width: 75%;}并在<div>之外设置<img>。这样系统就不会创建<p>来保留<img>。但这不是最好的做法。

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

这是我期望的布局。

Answer 1

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

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

以下是jsfiddle说明这一点。