0

我有一个在 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----

图片说明了我想要什么：

在此处输入图像描述

4

4 回答 4

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;
}
于 2013-05-29T01:12:07.540 回答
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;
}

原答案：

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

这是一个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;
}
于 2013-05-29T01:17:45.573 回答
0

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

于 2013-05-29T00:42:32.287 回答
0

像这样的东西？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>
于 2013-05-29T01:04:08.637 回答