Css 将图像扩展到其包含的div下面

我在一个div内有一个图像。它在div内按预期显示。添加

边距顶部

时，该div的背景向下延伸。我不想有这种行为。我怎样才能改变这个

我的代码如下：

<div id="content">
  <div class="page">
    <div class="half">
      <p>Text goes here.</p>
    </div>
    <div class="half">
      <img src="imghere.png" alt="img" />
    </div>
  </div>
</div>

这可确保带有

标记的列位于屏幕左侧，带有图像的列位于右侧，并随着窗口大小的调整而调整大小：）

如何使此网页从

----div-----------
文本图像
-----/div-----------

到

----div------------
正文
--/div——图像----

说明我想要什么的图片：

---

使用css并使用该div的父级上的overflow:hidden.

类似的内容

.第页{
宽度：500px；
保证金：0自动；
填充物：5px；
背景：红色；
}
.一半{
宽度：44%；
利润率：0.2%；
}
.浮动{
浮动：对；
}
.第页，img{
边框：5px纯黑；
}
img{
宽度：100px；
高度：100px；
背景：黄色；
}
正文

我不太完全理解这个问题，但我在css中编写了您想要的内容，而HTML没有改动。希望这能有所帮助。查看JSFiddle

HTML:

编辑：

我最初跳过了您在问题中提供了一些HTML和CSS的事实，因此在我最初的回答中，我只是偏离了提供的图像。查看您提供的HTML和CSS，要获得所需结果，您唯一需要做的就是在

img

标记上的CSS中设置负的底部边距。下面是一个使用原始标记的示例，CSS中唯一重要的附加内容是

img

标记上设置的负底边距

这样做的另一个好处是，即使在段落中添加更多的文本行（

p

）会改变包含元素的高度（

.page div

），图像也会保持在所需的位置（略低于包含它的

div

）

CSS

.page {
    width:500px;
    margin:0 auto;
    padding: 5px;
    width: 100%;
    background-color: #ED1C24;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    text-align: center;
}
.half {
    display:inline-block;
    width:44%;
    margin:0 2%;
}
img {
    margin-bottom:-50px;
}

p {
    width: 100%;
    background-color: #ED1C24;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    text-align: center;
}
img {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: 3px solid black;
    float: right;
    margin: -70px 100px;
}

原始答案：

您可以将图像定位在文本下方，浮动图像，并在图像上设置负上边距，使其剪切回包含文本的元素。这样，即使添加更多的文本行会改变包含元素的高度，图像也会保持在正确的位置

这里有一个

HTML

<p>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>
    <img />
</p>

---

这似乎是个奇怪的问题。你不想把这两件东西并排放在一起吗？现在还不清楚问题是什么。你想增加什么样的利润率，你到底想达到什么目的？@ralph.m谢谢你的提问。我希望右侧的图像稍微延伸到包含它的div下方。我添加了一个图像来说明我的意思。谢谢你的反馈。这就是你的意思吗？我是这个领域的初学者，但我也有类似的问题。你是否尝试过使用z-index来处理任何DOM元素？我在content div中添加了一个250px的页边距，并设置overflow:hidden；。div背景仍然随图像向下延伸。

.page{
    background-color:#cc0000;
    border-top:4px solid #000;
    border-bottom:4px solid #000;
    width:500px;
    margin:0 auto;
    padding: 5px;
    position:relative;
}
.half{
    display:inline-block;
    width:44%;
    vertical-align:top;
    text-align:right;
}
.half + .half{
    position:absolute;
    top:20px;
    text-align:left;
    margin-left:4%;
}
.half > img{
    display:block;
    height:100px;
    background-color:#F5EB00;
    border:4px solid #000;
}

.page {
    width:500px;
    margin:0 auto;
    padding: 5px;
    width: 100%;
    background-color: #ED1C24;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    text-align: center;
}
.half {
    display:inline-block;
    width:44%;
    margin:0 2%;
}
img {
    margin-bottom:-50px;
}

<p>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>Text
    <br/>
    <img />
</p>

p {
    width: 100%;
    background-color: #ED1C24;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    text-align: center;
}
img {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: 3px solid black;
    float: right;
    margin: -70px 100px;
}