DIV內的CSS DIV

我剛剛開始使用HTML/CSS，並且正在嘗試編寫自己的網站。但是，我想要一個標題，一個主要內容div和一個頁腳。在主內容div裏面，我想放置一個左欄和一個右欄，但不幸的是，左欄總是不在格子裏......我做錯了什麼？DIV內的CSS DIV

這裏是我的CSS：

body { 
 
    background-color: black; 
 
} 
 
p { 
 
    color: white; 
 
} 
 
#header { 
 
    background-color: grey; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    border-radius: 5px; 
 
    text-align: centaer; 
 
    /*change later*/ 
 
} 
 
#content { 
 
    background-color: green; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    border-radius: 5px; 
 
    padding: 50px; 
 
} 
 
#leftBar { 
 
    background-color: orange; 
 
    left: 20px; 
 
    right: 20px; 
 
    top: 20px; 
 
    float: left; 
 
    color: white; 
 
    width: 20%; 
 
    height: 60%; 
 
    display: block; 
 
} 
 
#footer { 
 
    background-color: gray; 
 
    margin-bottom: 20px; 
 
    margin-top: 20px; 
 
    margin-right: 100px; 
 
    margin-left: 100px; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    /*change later*/ 
 
}

Here is my HTML 
 

 
<html> 
 

 
<head> 
 
    <title>Titel</title> 
 
    <link rel="stylesheet" type="text/css" href="FirstpageCSS/mainstyle.css" /> 
 
</head> 
 

 
<body> 
 
    <p>Formatierter Inhalt</p> 
 

 
    <div id="header">HEADER</div> 
 
    <div id="content">this is going to be the content 
 

 

 

 
    <p>lol</p> 
 
    </div> 
 

 
    <div id="leftBar">contentntntntntnntnt</div> 
 

 
    <div id="footer">FOOTER</div </body> 
 

 
</html>

我在做什麼錯？我知道它的定位，但我總是感到困惑...

作爲一個新手欣賞任何幫助。

來源

2016-07-26 kendrickLamar

'＃leftBar'在HTML代碼中的＃＃內容之外。還要注意['float']（https://developer.mozilla.org/en-US/docs/Web/CSS/float）「指定一個元素應該取自正常流程」;你可能需要[清除你的浮動]（https://developer.mozilla.org/en-US/docs/Web/CSS/clear）。請參閱[我可以使用'clearfix'的哪些方法？]（http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use） – showdev

有更好的方法來在網頁上放置的內容，並使其響應裏面。 （如自舉）

<div id="header">HEADER</div> 
<div id="content">this is going to be the content 



<p>lol</p></div> 

    <div id="leftBar">contentntntntntnntnt</div> 

<div id="footer">FOOTER</div

對於您可以將leftBar DIV中的內容DIV，和頁腳的div結束標記首發。

<div id="header">HEADER</div> 
<div id="content">this is going to be the content 

<p>lol</p> 

<div id="leftBar">contentntntntntnntnt</div> 
</div> 

<div id="footer">FOOTER</div>

然後設置內容的div等於leftBar DIV的高度的高度。由於您將leftBar左移到左側，它將出現在內容div內部和左側。

爲了讓頁腳出現在底部，你需要打破花車，做一個空div然後使用CSS

<div class="clear"></div>

在CSS文件

，

.clear { 
    clear:both; 
}

這應該工作大部分。乾杯！

來源

2016-07-26 23:55:46 Sudhanva

嘗試把leftbar DIV內容DIV

<div id="header">HEADER</div> 
    <div id="content">this is going to be the content 

     <div id="leftBar">contentntntntntnntnt</div> 

     <p>lol</p> 

    </div> 

<div id="footer">FOOTER</div>

來源

2016-07-26 23:45:50

回答

相關問題