边栏被推下来

我的侧栏被推下来，而不是与我的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

边栏被推下来

回答

相关问题