Question

问题在于WordPress的帖子编辑。我有一个p标签，里面有一些文字和图片。

我希望文本的宽度为p的50％，图像能够占据p的整个宽度。

有可能吗？（默认情况下，每个图像都放在p标签中）

＆＃13;

<p>
  Here is some text which i want to have the 50% width of the p.
  <img src="">
</p>

＆＃13;

Answer 1

你可以通过将段落填充50％然后使图像加倍剩余空间的宽度来实现：

＆＃13;

p {
  padding-right:50%;
}
img {
  display: block;
  width: 200%;
  margin-top:1em;
}

＆＃13;

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in massa magna. Mauris a dui porttitor, tempus eros quis, efficitur est. Nam mollis auctor tempor. Phasellus ultrices porta gravida. Class aptent taciti sociosqu ad litora torquent per
  conubia nostra, per inceptos himenaeos. Sed rutrum vitae leo et venenatis. Ut consectetur sem in turpis tincidunt, sit amet vestibulum arcu volutpat. Aliquam tristique nulla vel scelerisque feugiat. Phasellus sodales diam nec leo pretium, ac placerat
  sem faucibus. Vivamus congue sapien hendrerit urna imperdiet, vel efficitur ipsum mollis.
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Full%20Width&w=500&h=300">
</p>

＆＃13;

Answer 2

您可以像这样使用display: flex;。

div {
  display: flex;
  width: 500px;
  height: 500px;
  background-color: blue;
  justify-content: center;
  align-items: center;
}
h1 {
  flex-grow: 1;
}
/*play with these values*/

img {
  flex-grow: 3;
}
/*play with these values*/

<div>
  <h1>x</h1>
  <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>

其中parent是父元素和child，child2是children元素

你应该将display：flex设置为你的父元素，并将flex-grow设置为相等的数字（如果你想要它们都是50％的宽度）

一些文档：

FLEXBOX

当然你可以使用CSS甚至JavaScript使用不同的技术，但我认为这是最简单的一种

Answer 3

如果您的img必须在p内（不理想），这里可以选择Flexbox等：

p {
  padding-right: 50%;
}
p img {
  width: 200%;
  max-width: 200%;
}

演示：https://jsfiddle.net/kn1ctyqk/

更改<p>标记内容的宽度，但不更改其中元素的宽度

3 个答案: