Question

嗨，我对网页设计有足够的新意，并创建了一个带有2个ap div的网站，用于在我的标题上定位图像。它在我的笔记本电脑上看起来很可爱但是当我在一台24英寸的显示器上检查出来时，定位到处都是，这是我的css

请指出正确的方向

全部谢谢

<body>

<div id="header"><h1 class="logo">&nbsp;FISH NORTH WEST</h1></div>  <!-- end of header -->

 <div id="headtest">

<div id="apDiv1"><img src="images/kingfisher38.png" height="208" /></div>

<div id="apDiv2"> <img src="images/monaghan_bream.png" /> </div>

</div> <!-- End of testdiv>*/-->


<div id="bodyhome">

        <ul>
            <li id="active"><a href="Index.html">Home</a></li>
            <li><a href="Lakes.html">Where to Fish</a></li>
            <li><a href="specimenfish.html">Specimen Fish</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="Prebait.html">Pre Bait</a></li>
            <li><a href="memberscode.html">Members Area</a></li>
            <li><a href="Testimonials.html">Testimonials</a></li>
            <li><a href="reservations.html">Reservations</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>



#headtest

{ 保证金：0自动; 位置：相对; 宽度：900px }

#apDiv1
{
   position:absolute;
   width:308px;
   height:174px;
   z-index:1;
   margin-top: 15px;
   margin-right: 15px;
   margin-bottom: 15px;
   margin-left: 30px;
   left: 179px;
   top: -14px;
}
#apDiv2
{
   position:absolute;
   z-index:1;
   left: 727px;
   top: -190px;
   width: 385px;
   height: 220px;
}

Answer 1

看起来你是相对于视口定位所以你需要设置一些“定位上下文”，就像这些2个div可以定位的元素一样：

<div id="container">

 <div id="apDiv1"></div>
 <div id="apDiv2"></div>

</div>

#container {
margin:0 auto; /* centered on the page */
position:relative; /* this will set the positioning context for your apDivs */
width:900px
}

Answer 2

首先，您不需要这么多div标签。您可以直接在图像上工作。我可以看到你想要实现的目标是在最左边获得一个图像，在标题的最右边获得另一个图像。你不需要位置：绝对的。一个简单的浮动：在第一个图像上留下一个浮动：在第二个图像上的右边会让你到达那里。另外，为图像的容器设置宽度，最好是一些左/右填充，这样它们就不会到达屏幕的边缘。

类似的东西：

HTML

<div id="header">
   <h1 class="logo">&nbsp;FISH NORTH WEST</h1>

    <img src="images/kingfisher38.png" height="208" id="apDiv1" />

    <img src="images/monaghan_bream.png" id="apDiv2" />

</div>

CSS

#header {
width:900px;
margin-left:auto;
margin-right:auto;
}

h1.logo {
text-align:center;
clear:both;
}

#apDiv1 {
float:left;
}

#apDiv2 {
float:right;
}

只需根据自己的喜好调整长度即可。希望它有所帮助。

Ap Div定位

2 个答案: