邊欄被推下來

我的側欄被推下來，而不是與我的main課程保持聯機，您可以在我的小提琴中查看更多問題。（這是我第一次沒有用bootstrap在很長的時間項目）。邊欄被推下來

查看我的fiddle。

來源

2016-12-26 Placeholder

你給寬度：100％的。主要類DIV，這裏是解決了一個解決方案：https://jsfiddle.net/31rjm8qb/8/ –

您的HTML看起來不正確。你的div .latest-single在.main中，寬度爲100％。你的側邊欄將無法與最新的單人游泳一起漂浮 – sol

你必須選擇一種如何顯示它們的方法。（block，flex，table）

我做到了由上.container類添加display:flex工作。

的jsfiddle https://jsfiddle.net/31rjm8qb/7/

來源

2016-12-26 11:53:09 xhulio

完美答案，非常感謝。 – Placeholder

你有幾個問題在這裏。

.main的寬度爲100％，因此.sidebar不適合
.sidebar是浮動的，而.main不大，所以他們不會排隊

我認爲這將是一個好主意，嘗試display: flexbox並完全移除浮標。看看下面的文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2016-12-26 11:54:47

我們試圖使'。sidebar'與我們的'.main'內聯，而不是我們的'nav'，但是，我已經解決了這個問題，並按照上面的建議添加了'display：flex'，並且它出現了我的問題現在已經解決了。謝謝一堆！ – Placeholder

Misspoke，意思是'sidebar'，編輯爲正確。 :) –

相反的float，使用flex是響應式設計的更好方法。嘗試將sidebar和main放置在div內display爲flex和flex-wrap爲wrap。

下面是一個示例 -

.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.latest-single { 
 
    width: 70%; 
 
    background-color: blue; 
 
} 
 

 
.sidebar { 
 
    width: 30%; 
 
    background-color: green; 
 
}

<div class="flexbox"> 
 
    <div class="latest-single"> 
 
    This is our primary content 
 
    </div> 
 

 
    <div class="sidebar"> 
 
    This is our sidebar content 
 
    </div> 
 
</div>

來源

2016-12-26 11:57:22 Hue

邊欄被推下來

回答

相關問題