浮动div开始下面另一个全宽浮动div

Question

我有两列，在左列中，我已使.title使用负余量扩展屏幕的整个宽度。 在右栏我有.sidebar我希望这出现在extented .title div下面。运行下面的代码片段，您会看到它从同一行开始。换句话说，我想要橙色的股市下跌到黄色的股利。

我不想在.sidebar上使用margin-top，因为左列中的.title的高度各不相同。

我意识到这是可能的JavaScript，但我正在寻找一个更强大的解决方案，只是使用HTML和CSS，这可能吗？

我还创建了一个小提琴，如果这是更方便http://jsfiddle.net/2dLaw17r/1/

.container { 
 
    width:600px; 
 
    margin:0 auto; 
 
    clear:both; 
 
    padding:1em; 
 
    background:grey;  
 
} 
 
.left { 
 
    float:left; 
 
    width:60%; 
 
} 
 

 
.left .title { 
 
    margin:0 -500%; 
 
    padding:0 500%; 
 
    background: yellow; 
 
} 
 

 
.right{ 
 
    float:right; 
 
    width:40%; 
 
    background:orange; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="container clearfix"> 
 
    <div class="left"> 
 
     <article>    
 
     <div class="title">Title extends beyond container</div> 
 
     <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p> 
 
     <article> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div> 
 
    </div> 
 
</div>

Answer 1

将一个div包含文章内容里面的文章。这样，标题和内容都保留在文章中。接下来，将文章内容左侧和侧边栏向右侧漂浮。负利润率伎俩不再需要：

.container { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    clear: both; 
 
    padding: 1em; 
 
    background: grey; 
 
} 
 
.title { 
 
    background: yellow; 
 
    /* eye candy only */ 
 
    margin: 0 -1em; 
 
    padding: 0 1em; 
 
} 
 
.left { 
 
    float: left; 
 
    width: 60%; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 40%; 
 
    background: orange; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="container clearfix"> 
 
    <article> 
 
    <div class="title">Title extends beyond container<br>And can grow in height</div> 
 
    <div class="content left"> 
 
     <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p> 
 
    </div> 
 
    </article> 
 
    <div class="sidebar right"> 
 
    <p>items in this sidebar div should fall below the title div. Currently it starts on the same line.</p> 
 
    </div> 
 
</div>

Answer 2

问题是与你的设计，而不是CSS ...如果你计划你的布局仔细就可以避免那些负页边距。我的建议可能的解决方法如下：

重新设计您的标记并重新命名为类更有益的方式：

working fiddle with updated markup

HTML

<div class="container clearfix"> 
    <div class="left"> 
     <div class="title">Title extends beyond container</div> 
     <div class="right"> 
      <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div> 
     </div> 
     <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p> 
    </div> 
</div> 

CSS

html, body { /* always mention this in you CSS - rule of Thumb for CSS */ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0 
} 
.container { 
    width:100%; /* stretch div to take full width of parent - HTML, BODY*/ 
    margin:0 auto; 
    clear:both; 
    padding:1em; 
    background:grey; 
} 
.left { 
    /* float:left;*/ /* not needed with updated layout :) */ 
    width:100%; 
} 
.left .title { 
    /*margin:0 -500%; 
    padding:0 500%; /* nightmare is removed */ */ 
    width:100%; 
    background: yellow; 
} 
.right { 
    float:right; 
    width:40%; 
    background:orange; 
} 
.clearfix:after { 
    content:""; 
    display: table; 
    clear: both; 
} 

Answer 3

像安东尼说，你必须把标题，外离开div。

.container { 
 
    width:600px; 
 
    margin:0 auto; 
 
    clear:both; 
 
    padding:1em; 
 
    background:grey;  
 
} 
 
.left { 
 
    float:left; 
 
    width:60%; 
 
} 
 

 
.title { 
 
    
 
    background: yellow; 
 
} 
 

 
.right{ 
 
    float:right; 
 
    width:40%; 
 
    background:orange; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="container clearfix"> 
 
    <div class="title">Title extends beyond container</div> 
 
    <div class="left"> 
 
     
 
     <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div> 
 
    </div> 
 
</div>

Answer 4

你要清楚浮动，如：

.container { 
 
    width:600px; 
 
    margin:0 auto; 
 
    clear:both; 
 
    padding:1em; 
 
    background:grey;  
 
} 
 
.left { 
 
    float:left; 
 
    width:60%; 
 
} 
 

 
.left .title { 
 
    margin:0 -500%; 
 
    padding:0 500%; 
 
    background: yellow; 
 
} 
 

 
.right{ 
 
    float:right; 
 
    width:40%; 
 
    background:orange; 
 
    clear: left;/*add clear left*/ 
 
    margin-top: -60px;/*add negative top margin*/ 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="container clearfix"> 
 
    <div class="left"> 
 
     <div class="title">Title extends beyond container</div> 
 
     <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div> 
 
    </div> 
 
</div>