HTML-CSS與div的位置問題

我得到了一個小問題，我測試似乎沒有任何工作。HTML-CSS與div的位置問題

我的HTML：

<div id="parent"> 
    <div id="top_parent">Top_background 
     <div id="top">Top_Picture</div></div> 
    <div id="content">Here comes random stuff<div> 
     </div> 

     <div id="bottom">Footer</div>

CSS：

#top_parent { 
    background:#f00; 
    height:100px; 
} 

#top{ 
    background:#0f0; 
    float:right; 
    position:relative; 
    height:100px; 
    width:50%; 
} 
#content{ 
    top:-50px; 
    background:#00f; 
    <!-- position:relative;--> 
    height:100px; 
    width:80%; 
    margin:auto; 
} 
#parent{ 
    background:#000; 
    height:350px; 
    width:100%; 
} 

#bottom { 
    height: 50px; 
    background:#ff0; 
    bottom:0px; 
    <!--position:absolute; --> 
    <!--position:relative; --> 
}

現在我的問題是，頁腳不會在parent DIV下得到的，它停留在內容區域。我究竟做錯了什麼？

JSF鏈接：my source

感謝您的幫助。

來源

2010-08-06 domiSchenk

注意，CSS中的註釋是用'/ *'和'* /'劃定的，而不是'<！ - '和' - >'。通常CSS解析器會簡單地忽略其中有錯誤的行，但是比抱歉，imo更安全。 – 2010-08-06 13:37:07

啊對，我的最後一個網站是在2年前左右，所以我簡單地忘了：D – domiSchenk 2010-08-06 22:51:44

您還沒有關閉這個div：

<div id="content">Here comes random stuff<div>

應該是：

<div id="content">Here comes random stuff</div>

你可以很容易地看到這一點，如果你縮進你的div：

<div id="parent"> 
    <div id="top_parent">Top_background 
    <div id="top">Top_Picture</div> 
    </div> 
    <div id="content">Here comes random stuff<div> <!-- Can see the problem --> 
</div> 
<div id="bottom">Footer</div>

來源

2010-08-06 13:29:04 Oded

grrr，我可以把我的頭撞在牆上。爲什麼我沒有看到這個。你的權利，如果我關閉HTML標籤的權利，它正常工作。 Thx快速回答！ – domiSchenk 2010-08-06 13:36:42

@Auro - 就像我說的，如果你使用乾淨的縮進標記，這樣的事情很容易被發現。 – Oded 2010-08-06 13:37:35

以及問題是我有閱讀障礙，我可以清理它的權利，也許我還是不會看到它：D，但謝謝！ – domiSchenk 2010-08-06 13:45:48

您是否試過在#bottom規則中取出該「底部」屬性？

來源

2010-08-06 13:28:31

是的沒有工作 – domiSchenk 2010-08-06 13:33:13

不知道，如果你複製粘貼，或者如果這是當你發佈你的代碼一個錯字，但此行：

<div id="content">Here comes random stuff<div>

應該有結束的而不是開放<div>標記的結束</div>標籤。如果這實際上是您的HTML，那麼它不會按照您希望的方式對div進行分組。

來源

2010-08-06 13:28:42 eldarerathis

我想你錯誤的html：

<div id="parent"> 
    <div id="top_parent">Top_background 
     <div id="top">Top_Picture</div></div> 
    <div id="content">Here comes random stuff<div> 
     </div> 

     <div id="bottom">Footer</div>

你沒有關閉DIV父，也不內容

<div id="parent"> 
    <div id="top_parent">Top_background 
     <div id="top">Top_Picture</div> 
    </div> 
    <div id="content">Here comes random stuff</div> 
    <div id="bottom">Footer</div> 
</div>

解釋你想要的「父」裏面的「底部」分區，否則：

<div id="parent"> 
    <div id="top_parent">Top_background 
     <div id="top">Top_Picture</div> 
    </div> 
    <div id="content">Here comes random stuff</div> 
</div>  
<div id="bottom">Footer</div>

而且，在你的CSS您應該啓用位置：#content div的相對位置，否則頂部參數將不起作用。嘗試解決問題。

來源

2010-08-06 13:33:09

爲了在內容div之後定位頁腳，你必須首先浮動內容div，然後添加clear：兩個css命令到頁腳。所以，你的樹看起來前人的精力像這樣:::

<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>

在這個例子中你的CSS應該是如下:::

格。包裝寬度：80％;
位置：相對;
margin：0 auto;
}

div.left { float：left;
寬度：60％;
背景：綠色;
height：200px;/身高僅用於測試，所以你可以看到的結果/ }

div.right { 浮動：權利;
寬度：30％;
背景：紅色;
height：200px;/身高僅用於測試，所以你可以看到的結果/ }

div.footer { 明確：兩者;
height：40px;/高度僅用於測試，因此您可以看到結果/ background：yellow;
寬度：100％;
}

來源

2010-08-06 14:44:33

HTML-CSS與div的位置問題

回答

相關問題