Question

为什么这不起作用？我已经分配了一堆带浮点数的div：left并想要设置第一个元素位置的位置，然后让所有兄弟姐妹的位置随之更新。

例如，我将第一个元素的css设置为左：50px。我期待兄弟姐妹也会转移，但他们没有，他们保持相对于父母的位置。

<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一起使用，以调整给定元素的位置而不会影响其周围的任何其他元素。< / p>

通常，您使用left，right，top和bottom为一组元素创建固定布局。它们中的每一个都是position:relative;（或absolute或fixed），并且有自己的定位，将相对于其父元素放置，而不是相对于彼此

这显然与float的概念完全不一致，padding-left:50px;的元素相对于彼此非常相关。

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

1）将wrap放在容器left:50px; div元素而不是浮动元素上的display:inline-block;上。

2）使用float:left;代替inline-block。这往往使布局比使用浮动更容易。我更喜欢{{1}}解决方案，因为我发现花车有时会非常痛苦，特别是当我想微调我的布局时。

请参阅我的JSFiddle示例：http://jsfiddle.net/xgKBc/

Answer 2

您可以在左侧为每个浮动器提供50px的相对位置。或者你可以在包装器中添加50px左边的填充。

请参阅 demo fiddle 两个示例。

css float：左边有位置

2 个答案: