html - CSS float :left with position left

Question

为什么这不起作用？我已经分配了一堆带有 float:left 的 div，并希望设置第一个元素的位置，然后用它更新所有 sibling 的位置。

例如，我将第一个元素的 css 设置为 left:50px。我原以为 sibling 也会全部转移，但他们没有，他们保持相对于 parent 的位置。

<style type="text/css">
    .wrap {margin:10px; width:auto; height:70px; background:#ccc; position:relative;}
    .floater {width:50px; height:50px; float:left; background:blue; margin:10px 0px 0px 10px; position:relative; left:10px;}
</style>

<div class="wrap">
    <div class="floater" style="left:50px; background:red"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>                             
</div>

我注意到如果我使用 margin-left 然后我得到我想要的行为但我不想使用 margin-left 因为我需要不时查询 div 的当前位置。

关于如何实现我想要的任何想法？谢谢。

雅各布

Answer 1

这是 left 的正确呈现 -- left 属性旨在与 position 一起使用，以调整给定的位置元素而不影响它周围的任何其他东西。

通常，您会使用 left、right、top 和 bottom 为元素组。它们中的每一个都是 position:relative;(或 absolute 或 fixed)并且有自己的定位，这将使它们相对于它们的父元素，彼此不相关。

这显然与 float 的概念不一致，其中元素相对于彼此的位置非常重要。

我想到了两种解决方案，它们可以满足您的需求:

1) 将 padding-left:50px; 放在容器 wrap div 元素上，而不是将 left:50px; 放在 float 元素上你有它。

2) 使用 display:inline-block; 而不是 float:left;。这往往使布局工作比 float 更容易。我更喜欢 inline-block 解决方案，因为我发现有时使用 float 非常痛苦，尤其是当我想微调我的布局时。

查看我的 JSFiddle 示例:http://jsfiddle.net/xgKBc/