css - 为什么我不能将这个 div 及其内容向上移动？

Question

我正在练习，因为我最近开始编程并且遇到了障碍，当我说我从早上开始就被困在这部分时我不是在开玩笑，首先是一些麻烦的图像，现在是这个。

基本上，我需要移动一个包含 img 和一些文本的 div，以便它保持在“ Logo ”下方，但不会移动!我尝试了很多，但可惜无济于事，我什至在 Firebug 上检查过它，看起来好像包含 Logo 的 div 超出了它应该的范围，但我很肯定我没有那样搞砸它。

此外，我不能为此使用
、html 中的样式或 %。

<div id="header">
    <img src="imgs/logo.png" id="logo" />
    <img id="donate" />
        <div id="divMenu">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#"> About </a></li>
                <li><a href="#"> Our Programs </a></li>
                <li><a href="#"> Gallery </a></li>
                <li><a href="#"> Contact </a></li>
                <li><a href="#"> Blog </a></li>
            </ul>
        </div>
</div>

<div id="bodyLogo">
    <img src="imgs/bg-featured.jpg"alt="" />
</div>
<div id="slogan">
    <p>As The Saying Goes.. </p>
    <p>You Don’t Know What You’ve Got </p>
    <p> ‘Till It’s Gone.</p>
    <h2>Plant A Tree.</h2>
    <h2> Grow A Tree.</h2>
    <h2><span id="tituloSpan">Save The Future.</span></h2>
</div>

这是它进行无形跳跃的地方，我无法桥接!

<div id="divPictures"  class="opacity">

    <div class="left">
        <a href="#"><img src="imgs/help-out.jpg" alt=""></a>
        <p>"TEXT"</p>
        <div id="flecha">
            <img src="">
        </div>
    </div>

    <div class="right" >
        <a href="#"><img  src="imgs/what-we-do.jpg" alt=""></a>
        <p>"TEXT."</p>
        <div id="flecha">
            <img src="">
        </div>
    </div>
</div>

还有 CSS:

  body{
   width: 956px;
   font-family: 'Rokkitt', serif;
   background: url("../imgs/bg-header.jpg");
   background-repeat:repeat-x;
   text-decoration: none;
   margin: 0 auto;
   }


  #bodyLogo{
height: 396px;
position: relative;
margin: 18px 0 0 0;
}


#divPictures{
position: absolute;
width: 956px;
background:  url("../imgs/bg-body.jpg");
margin: 0 0 700px 0 ;
vertical-align: top;
}

.left{
width: 478px;
float:left;
font-family: 'Quattrocento Sans', sans-serif;
}

.right{
width: 478px;
float:right;
font-family: 'Quattrocento Sans', sans-serif;
}

 .left img, .right img{
 margin: 0 0 0 10px;
 }

    #flecha{
background: url("../imgs/arrow-gray.png");
background-repeat: repeat-x;
width: 460px;
}

非常感谢。 最良好的祝愿。

Answer 1

您的 #bodyLogo 有一个固定的高度，这会使它超出它的大小。我不知道您的图片有多大，但是如果您移除该高度，所有内容都应该紧贴其下方。