css 溢出和 margin-left

Question

我在父 div 中有三个 div，溢出:隐藏；我想展示第三个。所以我想，我可以给第一个 div 一个 margin-left，而另外两个将移到左边。

<div style="width:1000px;background:red;overflow:hidden;height:50px;">
    <div style="width:1000px;height:50px;float:left;margin-left:-2000px;">
    1
    </div>
    <div style="width:1000px;height:50px;float:left;">
    2
    </div>
    <div style="width:1000px;height:50px;float:left;">
    3
    </div>
</div>

但是它显示了第二个 div。但是如果我添加 margin-left:-1000px;到第二个 div 并替换 margin-left:-2000px;到第一个 div 上的 -1000px 它将正常工作。我不明白为什么。

Answer 1

当你设置 -1000px 到 div 时，这个 div 不再处于相对位置，所以另一个 div 假定相对于父级的位置。

用于测试的 fiddle 示例: http://jsfiddle.net/FvBwC/5/

<div class="parent">    
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>

.parent { width:1000px; background:red; overflow:hidden; height:50px;  }
.one, .two, .three { width: 1000px; height: 50px; float: left; }
.one { background: blue; margin-left: -1000px; } 
.two { background: yellow; margin-left: -1000px; }
.three { background: green; }

但为了更好的解决方案，我会选择 display: none in CSS 或 .hide() in jQuery。