1

我不知道这是否可以用 CSS 完成，但在采用 JavaScript 方式之前，我想知道是否可以将一组绝对定位的 div 居中（作为一个整体）：

<div id="container">
  <div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
  <div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
  <div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
  <div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>

我想将页面中这些项目的边界框居中。

当然，由于它们的样式是“position:absolute”，所以它们不在流程中，所以容器 div 的大小为 0 px ......并且通常的技巧不起作用。

最后，上面的片段只是说明性的，在实践中，项目将被任意定位（其中一些是动态的），它们的大小和内容是未知的（也可以是动态的）。由于所有这些动态性，我宁愿让 CSS 处理所有事情都是可能的，而不是挂钩一大堆事件。

4

2 回答 2

0

嘿，现在你可以像这样轻松地更改你的 html 和 css

HTML

<div id="container">
  <div id="item1">...some content...</div>
  <div id="item2">...some content...</div>
  <div id="item3">...some content...</div>
  <div id="item4">...some content...</div>
</div>

CSS

#container{
background:red;

  overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
  margin:10px;
  margin-left:100px;
}

现场演示

于 2012-08-08T08:04:29.603 回答
0

如何给#container 一个固定宽度并给出一个位置：相对；请检查这个http://jsfiddle.net/65vk2/

于 2012-08-08T08:07:12.053 回答