【问题标题】:Positioning adverts div element between ordered div elements within one class在一个类中的有序 div 元素之间定位广告 div 元素
【发布时间】:2011-10-12 22:49:37
【问题描述】:

我在一个类中有三个 div 元素,在 html 文档中是这样的:

<div class="content">
  <div id="content_head">
    <!--CONTENT HEAD CODE-->
  </div>
  <div id="between_ads">
    <!-- ADS HERE -->
  </div>
  <div id="content_middle">
    <!--CONTENT MIDDLE CODE-->
  </div>
</div>

这些的css代码:

.content
{
  position: relative;
  width: 75%;
  float: left;
  left: -52px;
  margin: 5px 0 10px 0;
  border-right: 1px solid #D9D9D9;
}

.content #content_head
{
  /*position: relative;*/
  width: 100%;
  float: left;
  border-bottom: 1px solid #D9D9D9;
}

.content #content_middle
{
  /*position: relative;*/
  width: 100%;
  float: left;
  margin: 5px 0 0 0;
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
}

/*BETWEEN ADVERTS*/
.content #between_ads
{
  position: static;
  width: 100%;/*737px;*/
  height: 10px;
  /*margin: 302px 0 0 -17px;*/
  margin: auto;
  padding: 0;
  background: #000;
}
/*BETWEEN ADVERTS*/

问题是,BETWEEN ADVERTS 的结果代码如下所示: http://i.stack.imgur.com/ZU2FD.png - 窗口“Polecane”上方的黑色条以蓝色突出显示 - 但此 div 元素应放置在此处: http://i.stack.imgur.com/ww0Ko.png - 黄色突出显示在哪里。

.content 设置为 position: absolute 并设置为 relative 完全制动 .content 类的布局. 我对 html 和 css 很陌生,但仍然不是所有内容都理解。 干杯

【问题讨论】:

  • 不清楚,在这里创建一个工作演示link

标签: css class firefox html positioning


【解决方案1】:

尝试取出所有 div 中的 positionfloat。 Divs 自然喜欢一个在另一个之上,所以我认为添加定位 css 会破坏它。

【讨论】:

  • 你几乎是对的,但是.. 我必须在每个 div 中添加 position: relative;float: left;,现在可以了 :) i.imgur.com/cp7Ld.png
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多