將div放置在另一個下面

我有一個包含寬度爲100％的圖像的div，我想將所有其他內容（將放在內容div中的所有內容）放在其下。這裏是我當前的代碼：將div放置在另一個下面

98.214.131.200/index.php

<!DOCTYPE html> 
<html> 
<head> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<ul id="nav"> 
    <li><a href="http://tri-peoria.org">Home</a></li> 
    <li><a href="/forum">Forum</a></li> 
    <li><a href="/join">Join</a></li> 
    <li><a href="/members">Members</a></li> 
    <li><a href="/events">Events</a></li> 
    <li><a href="/training">Training</a></li> 
    <li><a href="https://www.facebook.com/groups/tripeoria/">Facebook</a></li> 
    <ab><a href="/about">Peoria Triathlon Club</a></ab> 
</ul> 
<ul id="quote"> 
<p>"random quote"</p> 
</ul> 
<div id="bg"><img src="bg.jpg" width="100%" alt=""</img></div> 
<div id="content"> 
<p>content</p> 
</div> 
</body> 
</html>

98.214.131.200/style.css

body { 
    background-color: #000000; 
    color: #C1C1C1; 
    font-family: Arial,Verdana,Helvetica,sans-serif; 
    margin: 0; 
} 
#bg { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    } 
#content { 
    position:relative; 
    color: #FFF; 
    } 
#nav { 
    z-index:1; 
    position:relative; 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; } 
#nav li { 
    float: left; } 
#nav li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #c00; 
    border-right: 1px solid #ccc; } 
#nav li a:hover { 
    color: #c00; 
    background-color: #fff; } 
#nav ab { 
    float: right; } 
#nav ab a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #c00; 
    border-right: 1px solid #ccc; } 
#nav ab a:hover { 
    color: #c00; 
    background-color: #fff; } 
#quote{ 
    z-index:1; 
    position:relative; 
} 
#quote p { 
    color: #000; 
    width: 350px; 
}

您可以訪問http：// 98.214.131.200看我現在的代碼。

來源

2012-09-18 Tyler Siegrist

我不明白是什麼問題。首先放置圖像。 – j08691

你需要爲div添加背景嗎？ – Prasanna

注意事項：圖片標籤不正確。它應該是'' – Axel

就拿<p>出<ul>的，並把它（與#content<p>一起）的#bg內。然後重新訪問您的定位聲明...

絕對定位元素依賴於具有相對定位的父容器。因此，#bg應該是position:relative而#quoteposition:absolute。通過使用#bg作爲報價和內容的父項，您可以將所有與您試圖關注的元素相關的所有內容都保留下來。

構建一個小提琴（使用您的IP地址爲圖像）。 http://jsfiddle.net/bqXc6/

這裏的要點壽：

#bg { position:relative; width:100%; } 
#quote { 
    position:absolute; 
    color: #000; 
    top: 20px; 
    width: 350px; 
    margin-left:20px; 
} 
#content { color:#FFF; margin-left:20px; }

請注意：在小提琴，我清理你的代碼，你的「浮動：左」使用溢出隱藏在它們的父導航元素（剛推開高度/寬度），所以它的背景顏色是可見的。

來源

2012-09-18 16:04:21 Dawson

-1

您可以使用display：block css屬性使其顯示在自己的行上。只需將該屬性添加到CSS樣式表中的#bg即可。

來源

2012-09-18 15:20:24 Mike

div是塊級元素 - 不需要定義該特徵。 OP所具有的問題是由於通過使用定位來改變文檔流而引起的。我沒有投票給你（fyi）。 – Dawson

您應該將#nav和#quote元素嵌入到div或header標記中並將其完全放置。然後你可以相對定位你的圖像容器，這將推下後續的內容。

HTML：

<div id="header"> 
    <ul id="nav"></ul> 
    <ul id="quote></ul> 
</div>

CSS：

div#header{ 
    position: absolute; 
} 
#bg{ 
    position: relative; 
}

來源

2012-09-18 15:22:02

這使得內容的位置正常運行，但它在頂部留下了一個大黑條，請參閱http：// 98.214.131。200看到 –

然後你應該把#nav和#quote放在絕對位置，而不是-1，如果我們的答案不工作oob。你需要位置：相對於你的形象來推低內容。 –

我編輯了我的答案。 –

爲了把背景圖片，使用下面的CSS屬性

背景圖像：網址（ 'yourimage.jpg'）;

來源

2012-09-18 15:25:31 Prasanna

對於所有窗口寬度，背景圖像的大小不適合 –

它比img標籤更好，您是否熟悉'background-size'屬性？ – Ana

不是跨瀏覽器！ –

將div放置在另一個下面

回答

相關問題