css - 将图像扩展到其包含的 div 下方

Question

我有一个位于 div 中的图像。它按预期显示在 div 中。当margin-top添加后，此 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>

CSS

.page {
  width:500px;
  margin:0 auto;
  padding: 5px;
}
.half {
  display:inline-block;
  width:44%;
  margin:0 2%;
}

这确保了带有 <p> 的列标签位于屏幕左侧，带有图像的列位于右侧，它会随着您调整窗口大小时调整大小 :)。

我怎样才能让这个网页从

-----div-----------
Text    Image
-----/div-----------

到

-----div------------
Text
--/div--Image----

说明我想要什么的图片:

Answer 1

编辑:

我最初跳过了您在问题中提供了一些 HTML 和 CSS 的事实，所以在我最初的回答中我只是放弃了提供的图像。查看您提供的 HTML 和 CSS，要获得所需的结果，您唯一需要做的就是在 img 标记的 CSS 中设置一个负底边距。这是一个 jsFiddle 使用您的原始标记，对 CSS 唯一重要的补充是在 img 标签上设置负底部边距。

这样做的额外好处是图像将保留在所需的位置(略微扩展到包含它的 div 下方)，即使在向段落添加更多行文本时( p) 更改包含元素 (.page 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;
}

原答案:

您可以将图像放置在文本下方，使图像 float ，然后在图像上设置负的上边距，使其缩回包含文本的元素。这样，图像将保持在正确的位置，即使添加更多文本行会改变包含元素的高度。

这是一个 jsFiddle

HTML

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

CSS

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;
}