Question

我在父div中有三个div，溢出：隐藏;我想展示第三个。所以我想，我可以给第一个div留一个边距，另外两个将向左移动。

<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

因为第一个div在父元素之外移动了2000像素。这基本上从父母内部的其他一切的相对位置“移除”它。换句话说，其余元素位于父元素内部，就像第一个div从未存在一样。 Div 2的位置相对于它是父节点中的第一个元素，即在左边：0。如果你想将div 2放在父级之外，你需要明确定义它的位置（比如设置它的边距：-1000px）。

要看清楚发生什么，请转到您的小提琴并将3个子div设置为100px的宽度，使父级保持在1000px。更多地使用边距。你应该看到发生了什么。

编辑：如果您要做的只是显示特定的div并隐藏其他两个，只需将其他两个设置为display:hide。

Answer 2

当您将-1000px设置为div时，此div不再处于相对位置，因此另一个div假定父级的相对位置。

小提琴测试示例： 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; }

但是为了更好的解决方案，我会使用CSS中的display：none或jQuery中的.hide（）。

css溢出和margin-left

2 个答案: