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

这可确保带有标记的列位于屏幕左侧，带有图像的列位于右侧，并在调整窗口大小时调整大小：）。

如何从

开始设置此网页

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

到

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

图片说明了我想要的内容：

enter image description here

Answer 1

我并不完全理解这个问题，但是我用你的HTML编写了你想要的css你想要的东西。希望这会有所帮助。看看JSFiddle。

http://jsfiddle.net/bH8qA/

HTML：

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

Answer 2

修改

我最初忽略了你在问题中提供了一些HTML和CSS这一事实，所以在我原来的回答中我刚刚提供了所提供的图像。查看您提供的HTML和CSS，要获得所需结果，您必须做的唯一事情是在img标记的CSS中设置负底部边距。这是使用原始标记的 jsFiddle ，其中CSS的唯一重要添加是img标记上设置的负底边距。

这样做的额外好处是图像将保留在所需的位置（略微延伸到包含它的div之下），即使向段落添加更多行文本（{{1 }}）更改包含元素的高度（p）。

<强> CSS

.page div

原始回答：

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

这是 jsFiddle

<强> HTML

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

<强> CSS

Text Text Text Text Text Text Text Text <img /> 

Answer 3

使用css并使用overflow：隐藏在该div的父级上。

Answer 4

这样的东西？ http://codepen.io/pageaffairs/pen/urGnL

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.page {
    width:500px;
    margin:0 auto;
    padding: 5px;
    background: red; 
}
.half{
    width:44%;
    margin:0 2%;
}

.float {
    float: right;
}

.page, img {
    border: 5px solid black;
}

img {
    width: 100px; 
    height: 100px; 
    background: yellow;
}

</style>

</head>
<body>

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

</body>
</html>

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

4 个答案: