Question

我正努力去理解div。

我想拥有＆＃39; nav＆＃39;面板根据需要垂直展开。我的第二个问题是，我似乎无法填充工作。我所做的任何更改都倾向于最终使用＆＃39;部分＆＃39; div低于＆＃39; nav＆＃39;格。

请参阅下面的jsfiddle和代码。

提前致谢。

sudo apt-get install libpython2.7-dev

Answer 1

尝试

#section{
    clear:both;
}

JSfiddle

clear：两者都允许浮动的div停止与其他浮动的div继续在同一条线上，然后降到下面。

更新：https://jsfiddle.net/s59cwy9s/2/

您可以通过向#nav

提供保证金权限来解决您的问题

Answer 2

这可能是由于您的名称栏未完全跨越网页的高度。尝试高度：导航栏的100％。它可能会成功。

Answer 3

首先我建议使用box-sizing属性它包含容器宽度和高度内的任何类型的填充或边框。详细了解Here。所以我建议：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

第二个是向容器中添加一个类，其中包含了像clearfix一样的浮动css属性的元素，并添加以下代码：

<div class='clear'></div>

.class
{
   clear:both;
}

或者您可以在包含具有float css属性的元素的容器之后创建一个div并清除它。

html,body {height:auto; width:100%; background:red; } 
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; } 

#container 
{ 
    min-width:800px; 
    height:auto; 
    margin:0 auto; 
    width:100%; 
} 
#nav 
{ 
    float:left; 
    width:30%; 
    padding: 15px; 
    line-height:30px; 
    background-color:#eeeeee; 
    min-height: 100px; 
    min-width: 80px; 
    background:white; 
}

#section 
{ 
    float:left;
    width:70%;
    padding:0 100px; 
    background:yellow;
}
.clearfix:after 
{
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

如果没有正确使用，尽可能多地使用float会导致布局出现问题。 https://css-tricks.com/all-about-floats/

我的解决方案：

br

希望它能帮助你。虽然我建议在布局上进行更多研究，因为其他布局会比浮动更少给你带来问题。

Answer 4

这是一些帮助： https://jsfiddle.net/6ubhyL5k/

一些建议：

花时间真正了解页面流的工作原理（浮动：左/右），这样您就可以了解浮动div时填充和边距的工作原理
使用您真正了解的内容，不要即兴发挥：）
不要使用import wget if windowsbit == x86: url = 'http://test.com/test_windows_2_56_30-STEST.exe' filename = wget.download(url) else: url = 'http://test.com/test_windows-x64_2_56_30-STEST.exe' filename = wget.download(url)在块之间留出空格（边距和填充是你应该使用的）
了解bootstrap如何运作，永不忘记响应式设计

了解div

4 个答案: