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

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="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}

Answer 3

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;
}