2

我有这个 div：

<!------ CONTENT ------>
<div id="content">
  <div class="top">
  I am cool<br />
  I am cool<br />
  I am cool<br />
  I am cool<br />
  </div>
</div>
<!------ /CONTENT ------>

使用这个 CSS：

#content{
    height:auto;
    width:100%;
    background-color:#FF0000;
}

#content .top{
    margin:15px 35px 35px 35px;
    padding:20px;
    width:inherit;
    height:inherit;
    position:absolute;

    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);

    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:rgba(224,224,224,.92);
}

我认为这会使内容 div 与浏览器窗口一样宽，然后调整 .top div 的大小以适应其中，同时还具有填充和边距（不知道如何解释得足够好），但事实并非如此. 相反 .top 与屏幕一样宽，但由于边距，它会延伸到窗口外的某个位置，然后添加另一个边距，使其具有水平滚动条，如下所示：

截屏

正如您所看到的，它应该更靠左，边距为 35，并且页面的末尾应该是页眉结束的地方。

我希望这很清楚，我从来没有解释过这样的事情，但我希望有人能在这里帮助我，这真的让我很烦。

4

2 回答 2

1

如果您忽略浮点数，则定位 absolute 及其同类：width:100% 指的是最近的封闭框。

我的猜测是你的内容周围有一个元素并不像你想象的那么广泛。

（在您的 CSS 中某处种植 *{border: 1px solid red} 以进行调试永远不会受到伤害；））

于 2012-06-10T21:52:13.727 回答
0

您的问题是width指定了内部容器宽度，并且margin添加padding了和。

我不明白你为什么在position: absolute这里使用。

这是否符合预期？

于 2012-06-10T21:49:22.250 回答