Question

我的网站上有一个容器，宽度为1024px。我将div放在另一个里面。但我希望其中一个填充屏幕宽度，所以我不得不使用<?xml version="1.0" encoding="utf-8" ?> <Items> <Armor> <ArmorItem> ...Item elements </ArmorItem> </Armor> <Consumables> <ConsumableItem> ...Item elements </ConsumableItem> </Consumables> <Junk> <JunkItem> ...Item elements </JunkItem> </Junk> <QuestItems> <QuestItem> ...Item elements </QuestItem> </QuestItems> <Weapons> <WeaponItem> ...Item elements </WeaponItem> </Weapons> </Items>。问题是，当我将下一个div放在它下面时，它代替了绝对定位的div。类似的东西：

position: absolute

我怎么解决这个问题？

Answer 1

尝试位置：相对而不是绝对，并将宽度设置为100％

Answer 2

默认情况下，div应该＆＃34;填充屏幕宽度＆＃34;因为它的显示是块，默认宽度是100％（使用div的默认定位[静态时]）。

然而，如果你想要＆＃34;更低＆＃34; div在＆＃34; upper＆＃34;之后开始div（你想继续在上部div上使用绝对定位）你也可以将它的位置设置为绝对值，并将top属性设置为上部div的高度。

<div style="width: 1024px; margin: 0 auto;">
   <div style="position: absolute; height: 500px; top:0; left:0;">
   </div>
   <div style="height: 100px; position:absolute; top:500px; left:0;">
      It's at the top of the upper div.
   </div>
</div>

Answer 3

您的CSS必须是这样的：

section {
display: block;
width: 1024px;
margin: 0 auto;
}

section div:nth-of-type(1) {
height: 500px;
}

section div:nth-of-type(2) {
height: 100px;
}

你的HTML是这样的：

<section>
<div>
</div>

<div>
Now it's where it should be.
</div>
</section>

将div定位在位置绝对的div下方

3 个答案: