带两列布局的浮动边距 [英] Negative margin with float for two-column layout

问题描述

我看到两个列布局做如下的方式，但我不明白为什么它的工作原理。
那么 .col-sub 是什么？如果我删除 .col-sub 中的 margin-left：-100％，子内容将会掉落。如果我删除 float：left ，子内容不能显示。 margin-left和float在这里做什么？

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

HTML：

 < div class =wrapper> 
< div class =col-main>主要内容< / div> 
< div class =col-sub>子内容< / div> 
< / div> 
  

CSS：

 code> * {
 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; 
} 
  

解决方案

使用浏览器的开发人员工具，并且使用子内容的 margin-left 值玩耍 - 从 -100％到 0％，你会看到它移动到橙色的主要内容，然后到底。



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

会在旁边的左侧漂浮的主要内容旁边。

通过引入负边距，该空间被创建。负边距覆盖子内容之前的元素的右边缘，使得整个事物看起来好像该右边缘进一步向左。当右边距达到 -100％时，就好像从左子内容的角度来看整个主要元素不在那里 - 所以很高兴将其放置在上方包装元素左侧的主要内容。

I saw two column layout made as following way, but I didn't understand why it works. So what actually does the .col-sub do? If I remove margin-left:-100% in .col-sub, the Sub Content will fall down. If I remove float: left in it, the Sub Content can't show. What does margin-left and float do here?

Demo can also be found here: 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;
       }

解决方案

Use your browser’s developer tools, and play around with the margin-left value of the sub content – decrease (or rather increase?) it slowly from -100% to 0%, and you will see it move across the orange main content, then end up under it.

Under it is where it normally would go (without negative margin), because it is floated left, but it’s position in the DOM is after the main content. It would go right next to the also left-floated main content, if there was any space – but there isn’t any, because the main content is 100% wide.

By introducing a negative margin, that space is "created". The negative margin "overwrites" the right edge of the element before the sub content, making the whole thing act as if that right edge was further to the left. When the right margin reaches -100%, it is as if the whole main element "wasn’t there" from the point of view of the left sub content – so it happily takes it’s place above the main content to the left of the wrapper element.

这篇关于带两列布局的浮动边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！