对齐彼此相邻的绝对定位元素

Question

全部，

我想将绝对定位的元素彼此相邻对齐。我确定我已经在自己的代码中看到了这种效果，但是我正在努力在我当前的项目中重现这种效果。

这是布局草图：

绝对定位的元素（大约 100 个 div）从左到右对齐，当它们用完空间时，它们会落入下一行。所有这些听起来都像是浮动的工作，但是，由于对定位的细微调整，我必须使用绝对位置。

我的问题是如何在父 div 中自动对齐绝对定位的 div。

Answer 1

当空间不足时，它们会落入下一行

这对绝对定位的元素不起作用，因为它们是绝对定位的。

这听起来像是 jQuery masonry 插件的工作。

更新：

是的，当然，绝对位置是必需的，因为 div 实际上从（例如）顶部开始：-50px；左：-50 像素。 IE。说布局开始在可视区域之外渲染，这是故意的效果，以便给人一种“更大的图片”的错觉 - Kayote

如果是这种情况，请在子 div 中使用浮动，并将父容器 div 设为顶部：-50px。

更新：

但是 div 从四面八方延伸，即从左、右、上、下。花车不会让我这样做。使用绝对位置和 js，我可以控制一行应该延伸多远 - Kayote

那么您的 CSS 没有正确完成。有一些方法可以达到这种效果。请在 jsfiddle.com 上复制您的代码，或链接到它。

Answer 2

HTML：

<div class="parentContainer">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS：

.parentContainer {
    width: 200px;
}

.child {
    float: left;
width: 40px;
height: 40px;
margin: 5px;
position: relative;
}

希望这行得通。

这是http://bittu.github.com/hidden-tiles/的示例

如果您想让child 元素超出可视屏幕，则不要指定parentContainer 的宽度

.parentContainer {
    width: auto;
}

Answer 3

html

<div class="wrap">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner noPaddingRight "></div>

  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner noPaddingRight "></div>

</div>

css

    .wrap {
float:left;
position:absolute;
    width:100%;
}

.inner {
float:left;
margin:0 0 5px 1%;
    width:23%;
    border:1px solid red;
    height:100px;
}

.noMarginRight {margin-right:0 !important}