Question

我正在练习，因为我最近开始编程，而且我已经来到了我的道路上，我不是在开玩笑，当我说我从早上起就被困在这部分，首先是一些麻烦的图像，现在这个。

基本上我需要移动一个带有imgs和一些文本的div，以便它保持在＆＃34; Logo＆＃34;但它不会让步！我尝试了很多但是唉无济于事，我甚至在萤火虫上检查了它，看起来好像包含徽标的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上有一个固定的高度，这会使它超出它的大小。我不知道你的图像有多大，但是如果你移除那个高度，一切都应该在它下方拍摄。

为什么我不能移动这个div及其内容？

1 个答案: