1

我现在在一个网站上工作，但是我在将图像放在 2 个 div 上时遇到了一些问题，还有一个问题是底部 div 是页脚，我想坚持到底（这部分有效，但是div顶部的图像不是）

这是一张图片，可以更好地向您展示我的想法：在此处输入图像描述

如果您需要查看我的代码问我，我想知道一些关于如何实现这一点的想法。

对于已经在我的帖子下发表评论的人，首先感谢您的时间，但遗憾的是它没有用（到目前为止，我一直在尝试您的建议）但是为了帮助您更多地了解我尝试做什么，我给您我的一些代码。

<html>
<head>
<style type="text/css">
/* general */
 body { background: #fdfdfd; font:  12px Verdana, Geneva, sans-serif;  color:#444;      margin: 0 0 300px; /* bottom = footer height */}
 html { position: relative; min-height: 100%;}
 .fix_width { width: 940px; margin: 0 auto; }
 .fix_width:after, .left_foot_cont ul li:after { content: "  " ; display:block; height:0; clear:both; visibility:hidden; }

  #header { background:#6FF; height:100px; z-index: 3; position: relative;  border-top: color: #555555 thick; border-width:5px; }
  #container { position:relative; top:0px;  margin-top:100px;     overflow: auto;}
  .cont {width:250px; padding-left:20px;  margin-left:10px; display:inline-block; float:left;  }

  #footer {  background: #A9CF38;       position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;}

    img {width:940px; }


 </style>



</head>
<body>

<div id="header">
        <div class="fix_width">
<h2>
Just the header nothing important
</h2>
        </div>
</div>

     <div id = "container">
                    <div class="fix_width">
                                    <div class="cont">
                                               <h2>
                                                            Lorem ipsum
                                                </h2>
                                                <p class="last">
                                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                                                </p> <!-- End p.last -->
                                    </div><!-- End .cont -->
                     </div> <!-- End .fix_width -->
          </div><!-- End .container -->

          <!-- Where should i put the image  ????? --->
          <img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>


               <div id = "footer">
                    <div class="fix_width">


                                        <div class="footer_con_left">
                                                              <h2>
                                                                     Lorem ipsum
                                                                     <br /><br />
                                                            </h2>
                                                             <h1>
                                                                    dolor sit amet
                                                                    <br /> 
                                                                    dolor sit amet
                                                                    <br  />
                                                                    dolor sit amet
                                                                    <br />
                                                                    dolor sit amet      
                                                        </h1>
                                        </div>  <!-- End. footer_con_left -->
                        </div><!--  Einde class fix_width -->
      </div> <!-- Einde class footer -->

</body>

</html>

正如您在代码中看到的图像，我希望此图像被放置在白色空间的 50% 和绿色空间的 50%（所以在容器 div 和页脚 div 之间的代码中，或者更好地说在这些 div 之上）

感谢您的帮助！

4

3 回答 3

0

我认为您应该检查我在此链接上制作的代码

上面链接上的代码将使您的图像在您的 div 之间居中

忽略这一点。

<html>
<head>
    <style type="text/css">
    #container{
        width:100%;
        height:100%;
        position:absolute;
        background:black;
        margin:0px;
        padding:0px;

    }
    #test1{
        width:100%;
        height:35%;
        position:relative;
        background:blue;
        margin:0px;
        padding:0px;

    }
    #test2{
        width:100%;
        height:25%;
        position:relative;
        background:white;
        margin:0px;
        padding:0px;

    }
    #test3{
        width:100%;
        height:40%;
        position:absolute;
        background:red;
        margin:0px;
        padding:0px;

    }
    .content{
        width:200px;
        height:200px;
        background:white;
        float:left;
        margin:10px 0px 10px 50px;
        left:200px;
        position:relative;
    }

    </style>



</head>
<body>
<div id="container">

    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>



    </div>

</div>

</body>

</html>
于 2013-09-02T16:26:15.803 回答
0

将图像包装在 div 中：

targethoweveryouwish {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-300px;
z-index:10;
}

好的，这就是上面代码中发生的事情。50% 的属性将 div 移动到页面的中心，但它会将 div 的左上角移动到中心，因此您需要减去 div 的一半高度和宽度以使其正确居中，对 margin-top 和 margin-left 属性进行这些调整。z-index 基本上类似于向页面添加图层的 2D 方式。默认情况下，一切都在第 0 层，所以如果你想重叠事物，只需将它们放在更高或更低的 z-index 上。您也可以使用负值。

于 2013-09-02T16:31:10.440 回答
0

您应该将图像放在 DIV1 中，设置position:relative为 DIV1，position:absolute到 IMAGE 并设置bottom:-50%为 IMAGE 或bottom:0px;margin-bottom:-50%;

于 2013-09-02T16:17:25.973 回答