將絕對定位的元素彼此對齊

Question

所有，

我想將絕對定位的元素彼此對齊。 我肯定我已經在自己的代碼中看到了這種效果，但是我正在努力在我當前的項目中重現這種效果。

這是布局草圖：

絕對定位的元素（大約100格）從左到右對齊，如果空間用盡，它們將進入下一行。 所有這些聽起來都像是浮子的工作，但是，由於對定位的細微調整，我必須選擇絕對位置。

我的問題是如何自動在父div內對齊絕對定位的div。

Answer 1

當它們空間不足時，它們會掉入下一行

這不適用於絕對定位的元素，因為它們是絕對定位的。

這聽起來像是jQuery 石工插件的工作。

更新：

是的，絕對位置是必需的，因為div實際上是從（例如）top開始的：-50px; 左：-50px。 也就是說，布局開始在可見區域之外進行渲染，這是故意產生的效果，以便給人“更大的圖片”幻覺-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}