Question

我看到两个列布局按照以下方式制作，但我不明白它为什么会起作用。那么.col-sub究竟做了什么呢？如果我删除margin-left:-100%中的.col-sub，则子内容将会失效。如果我删除其中的float: left，则子内容无法显示。 margin-left和float在这里做什么？

演示也可以在这里找到：http://jsfiddle.net/yougen/ATNh9/

HTML：

<div class="wrapper">
        <div class="col-main">Main Content</div>
        <div class="col-sub">Sub Content</div>
</div>

CSS：

       * {
            padding:0;
            margin: 0;
        }

       .wrapper {
           margin: 0px auto;
           width: 960px;
           text-align: center;
           line-height: 580px;
       }

       .col-main {
           width:100%;
           height:580px;
           float: left;
           background-color: #f16529;
           border: solid 1px #000;
       }

       .col-sub {
           float: left;
           margin-left: -100%;/** -960px **/
           width: 350px;
           height: 580px;
           background-color: #f0dddd;
       }

Answer 1

使用浏览器的开发者工具，并使用子内容的margin-left值 - 从-100%到0%缓慢减少（或者更确切地说是增加？），然后您将看到它移动到橙色主要内容，然后最终在它下面。

在它通常会去的地方（没有负边距），因为它向左浮动，但它在DOM中的位置在主要内容之后。如果有任何空间，它将在左侧浮动的主要内容旁边 - 但是没有，因为主要内容是100％宽。

通过引入负边距，该空间被“创建”。负边距在子内容之前“覆盖”元素的右边缘，使得整个事物就好像右边缘更靠左边。当右边距达到-100%时，从左侧子内容的角度来看，好像整个主要元素“不存在” - 所以它很高兴将它放在上面包装元素左侧的主要内容。

两列布局的浮动负边距

1 个答案: