文章/答案/技术大牛

发布

社区首页 >问答首页 >Ap分区定位

问Ap分区定位
EN

Stack Overflow用户

提问于 2011-04-23 22:10:43

回答 2查看 4.7K关注 0票数 0

嗨，我是新来的网页设计，并已与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;
}

html

css

回答 2

Stack Overflow用户

发布于 2011-04-23 22:31:16

看起来您是相对于视口进行定位的，因此您需要设置一些“定位上下文”，比如可以从中定位这两个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
}

票数 0

Stack Overflow用户

发布于 2011-04-23 23:16:47

首先，你不需要这么多的div标签。您可以直接对图像进行操作。正如我所看到的，您正在尝试实现的是将一个图像放在标题的最左边，另一个放在最右边。你不需要这个位置:绝对位置。在第一张图片上使用一个简单的浮动:left，在第二张图片上使用一个float:right就可以了。另外，设置图像容器的宽度，最好是一些左/右填充，这样它们就不会到达屏幕的边缘。

类似于：

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;
}

只需根据您的喜好/需要调整长度即可。希望能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5764650

复制

相似问题

问Ap分区定位
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ap分区定位EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ap分区定位
EN