浮動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>