将绝对定位元素彼此对齐

Question

所有

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

这是布局草图：

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

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

Answer 1

  

当他们的空间不足时，他们会进入下一行

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

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

<强>更新

  

是的，绝对位置是必需的，因为div实际上从（例如）top开始：-50px;左：-50px。即要说布局开始在可视区域外渲染，这是故意的效果，以给出“大局”的幻觉 - Kayote

如果是这种情况，请使用子div中的浮点数，并将父容器div设为top：-50px。

<强>更新

  

但是div从各个方向伸出，即从左，右，上，下延伸。花车不会让我这样做。绝对的位置＆amp; 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}