0

我可能在这里遗漏了一些明显的东西，但这让我发疯了。

有问题的页面是这个测试站点的主页。

  • header id 是相对定位的，我试图在其中绝对定位元素（两个人的照片和这些照片旁边的文字，#bodyad1 和#bodyad2）。

  • 问题是，他们拒绝工作并最终被绝对定位在#header之外，相对于身体。

奇怪的是我已经将另一个元素绝对定位在标题内并且它可以工作（丝带的照片）。但是，当我插入其他两个元素时，标题会中断：所有标题内容都会移动到页面底部。

有什么想法吗？

<div id="bodyad1">
    <img src="images/person1.png" alt="">
    <div id="bodyad1-text">
        <h3>—Featured Story—&lt;/h3>
        <p>John Smith</p>
        <h2>Toronto Criminal Lawyer</h2>
</div>

<div id="bodyad2">
    <img src="images/person2.png" alt="">
    <div id="bodyad2-text">
        <h3>—Featured Story—&lt;/h3>
        <p>John Smith</p>
        <h2>Toronto Criminal Lawyer</h2>
    </div>
</div>

<div id="adlogo">
    <img src="images/advocatedaily-logo.png" alt="Advocate Daily dot com Logo">
    <h2>Ontario's Legal News</h2>
</div>
 <div id="adsash"></div>

<div class="clear"></div>

CSS（是的，我知道我可以让我的样式更简洁）

/*header*/
#header {
  display: block;
  border-bottom: 1px solid #9e0505;
  position: relative;
}
/*   Featured Lawyer Body Shots   */

#bodyad1 {
    display:block;
    position: absolute;
    width: 220px;
    height: 94px;
    bottom: 0px;
    left: 60px;
}

#bodyad2 {
    display:block;
    position: absolute;
    width: 220px;
    height: 94px;
    bottom: 0px;
    right: 60px;

}

#bodyad1 img{
    float:right;
    display:block;
}

#bodyad1-text {
    height:94px;
    float:right;
}

#bodyad1-text  h3 {
    font: italic 10px helvetica, arial, sans-serif;
    color: #666;
    text-align: right;
}

#bodyad1-text  p {
    font: normal bold 11px helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #cd1713;
    text-align: right;
}

#bodyad1-text  h2 {
    font: normal bold 11px helvetica, arial, sans-serif;
    color: #666;
    text-align: right;
}

#bodyad2 img {
    float:left;
    display:block;
}

#bodyad2-text {
    height: 94px;
    float: left;
}

#bodyad2-text  h3 {
    font: italic 10px helvetica, arial, sans-serif;
    color: #666;
    text-align: left;
}

#bodyad2-text  p {
    font: normal bold 11px helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #cd1713;
    text-align: left;
}

#bodyad2-text  h2 {
    font: normal bold 11px helvetica, arial, sans-serif;
    color: #666;
    text-align: left;
}
4

1 回答 1

1

原来我错过了一个结束 div 标签，但由于我的缩进风格，我让它看起来确实关闭了它。

很荒谬的事情要发布。继续。

谢谢@pebbl。

于 2013-02-21T15:14:27.500 回答