理解divs

我努力理解divs。理解divs

我希望「導航」面板根據需要垂直展開。我的第二個問題是，我似乎無法使填充工作。我所做的任何更改都傾向於以'nav'div下面的'section'div爲結尾。

請參閱下面的jsfiddle和代碼。

在此先感謝。

<div id="container"> 
    <div id="nav">   
     test  
    </div> 
    <div id="section">   
     test  
    <br><br><br><br>   
     test   
    <br><br><br><br>   
     test   
    </div>  
</div> 

#container 
{  
    width: 1156px; 
    margin-top: 0; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 5px 5px 10px rgb(0,0,0); 
    position: relative; 
    background-color: transparent; 
    height: auto;   
} 

#header 
{ 
    background-color:black; 
    color:white; 
    text-align: center; 
    padding:5px;  
} 

#nav 
{  
    line-height:30px; 
    background-color:#eeeeee; 
    min-height: 100px; 
    min-width: 80px; 
    float:left; 
    padding: 15px; 
    display: inline-block; 
    height: auto;  
} 

#section 
{  
    /*float: none;*/ 
    padding: 10px; 
    display: block; 
    /*position: absolute;*/ 
    /*overflow: auto;*/ 
    background-color: white; 
    width: auto; 
    height: auto;  
}

來源

2015-09-26 Flamin_Squirrel

嘗試

#section{ 
    clear:both; 
}

JSfiddle

clear：既允許浮動的div停止繼續與其他漂浮的人在同一行及以下下降。

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

您可以通過給保證金右到#nav

來源

2015-09-26 18:44:17

不好意思啊，我不清楚。我希望他們在同一條線上。但是，由於某些原因，填充不起作用。 –

@Flamin_Squirrel會爲你更新嗎？ –

這可能是由於你的名字吧不跨越的高度，解決您的問題該網頁完全。嘗試像高度：100％的導航欄。它可能會訣竅。

來源

2015-09-26 18:45:34 Samantha

首先我會推薦使用框尺寸屬性它包含任何類型的容器寬度和高度內的填充或邊框。查找更多關於它的信息Here。因此，我建議：

* 
{ 
    box-sizing:border-box; 
    /* Use browser prefixes if u want support for other browsers */ 
}

二是添加一個類包含的元素機智浮動的CSS屬性像clearfix容器並添加以下代碼：

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

，或者你可以創建容器後一個div包含具有float css屬性的元素並將其清除。

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

.class 
{ 
    clear:both; 
}

儘可能多地使用浮點數會導致佈局中的問題，如果不正確使用。 https://css-tricks.com/all-about-floats/

我的解決方案：

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; 
}

希望它可以幫助你。雖然我建議研究更多的佈局，因爲有其他佈局，這將給你比浮動少問題。

來源

2015-09-26 19:01:16 hengecyche

下面是一些幫助： https://jsfiddle.net/6ubhyL5k/

一些建議：

花費時間去真正瞭解如何在網頁流量工程（浮動：左/右），那麼你就會明白如何填充和保證金工作，當你有浮動DIV
使用你真的知道的和不湊合:)
不要使用br使塊之間的空隙（margin和padding是你應該使用什麼）
看看如何bootstrap作品念念不忘的響應式設計

來源

2015-09-26 19:01:23

回答

相關問題