gpt4 book ai didi

css - 如何使图像完全流血但填充内容

转载 作者:行者123 更新时间:2023-11-28 17:11:18 25 4
gpt4 key购买 nike

我的 HTML 标记主要是段落、uls 和标题。我无法编辑标记,但我想将内容填充 40px,但使图像全宽,因此左 -40px 右 -40px。

在没有 jQuery 的情况下实现此目标的最佳方法是什么?

p,
h2 {
padding: 0 40px;
}

img {
margin-left: -40px;
width: 100%;
}
<p>But how? Genius in the Sperm Whale? Has the Sperm Whale ever written a book, spoken a speech?</p>

<p>Champollion deciphered the wrinkled granite hieroglyphics. But there is no Champollion to decipher the Egypt of every man's and every being's face.</p>
<p><img src="https://i.picsum.photos/id/163/536/354.jpg?hmac=n2PYO9vvS48HLf1RW7MB27ZvPxK5nhLT3sTTcVIqDtw" /></p>
<h2>If the Sperm Whale be physiognomically a Sphinx</h2>

<p>In the full-grown creature the skull will measure at least twenty feet in length. Unhinge the lower jaw, and the side view of this skull is as the side of a moderately inclined plane resting throughout on a level base.</p>

<p>It is plain, then, that phrenologically the head of this Leviathan, in the creature's living intact state, is an entire delusion.</p>

布局是流畅的,所以如果可以的话我真的不想固定宽度。

最佳答案

您只需修改您的 CSS 即可:

p, h2 {
padding:0 40px 0 40px; /*Just so that we can see why I added the 80px. (top, right, bottom, left)*/
}

img {
margin-left: -40px; /*-40px to make up for the parent's padding to the left*/
width: calc(100% + 80px); /*You need to change to this.*/
}

关于css - 如何使图像完全流血但填充内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29142145/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com