Question

这很难描述，但我会尽我所能。

我正在为论坛制作模板。在每个线程中，帖子彼此对齐。帖子居中。我想要一个包含浮动到线程左侧的用户名，标题和帖子的div。图片描述最佳：http://nclabs.org/screenshots/stackoverflow.png。红色箭头指向我正在谈论的div，红色线条显示没有position: absolute的div的位置。

问题是，因为div是绝对定位的，当屏幕变得太小时，div“掉落”页面，而不是显示滚动条。我意识到这是position: absolute的正常行为。

当屏幕太小时，如何让div浮动到（居中）帖子的左边而不会从页面上掉下来？

这是一些CSS：

#wrapper { // the whole page is wrapped in this div
    margin: 0 auto;
    width: 900px;
    position: relative;
}

#thread .threadauthor { // the divs containing the username, etc
    position: absolute;
    text-align: right;
    margin-left: -7.5em;
    margin-top: .5em;
    left: 0;
}

HTML看起来像这样：

<div class="threadauthor">
<div class="Webmaster">nightcracker</div>
<div class="Webmaster"><small>Webmaster</small></div>
<div class="postcount"><small>Posts: 24</small></div>
</div>

<div class="threadpost">

Answer 1

您没有提供所有HTML和相关样式，因此很难直接回答。 .threadpost是固定宽度的吗？如果是这样，那么因为.threadauthor也是固定宽度（负边距为7.5em），你可以将它们放入同一个容器div中：

<div class="post">
  <div class="author"></div>
  <div class="body"></div>
</div>

然后，您可以将.author和.body设置为固定宽度的两列布局，这里有两个选项（如果您搜索它们还有很多选项）：< / p>

将position: relative提供给.post，将position: absolute提供给.author，将margin-left等于.author的宽度设为.body。
将.author或.body浮动到旁边。

这应该会给你带来更好的结果。

在小屏幕上保持绝对div可见

1 个答案: