遇到一些麻煩讓兩個div彼此相鄰浮動

我知道這個問題已被一遍又一遍地回答，但我找不到適合我的東西。我認爲這與缺乏顯示有關：內容或邊欄中的屬性，但我不確定是什麼。請看看我的代碼，看看你能否發現我的錯誤。遇到一些麻煩讓兩個div彼此相鄰浮動

我很抱歉問這個問題，我確定有一些明顯的答案，但我還沒有能夠發現它。

在此先感謝

安迪

<html> 
<head> 
<title>Andy's test website</title> 

<style type="text/css"> 
html, body 
{ 
    margin:0px; 
    padding:0px; 
} 

p 
{ 
    margin:0px; 
    padding:0px; 
} 

#container 
{ 
    margin:0 auto; 
    background-color:white; 
    width:760px; 
    border:1px solid gray; 
} 
#header 
{ 
    line-height:130%; 
    border-bottom:1px solid gray; 
    width:760px; 
} 
#content 
{ 
    float: left; 
    width:500px; 
    margin-right:260px; 
} 
#sidebar 
{ 
    float: right; 
    width:260px; 
} 
#footer 
{ 
    clear:both; 
    width:760px; 
} 

</style> 

</head> 

<body> 
<div id="container"> 

    <div id="header"> 
    <h1>Hello World</h1> 
    </div> 

    <div id="content"> 

    <p> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
    </p> 

    </div> 

    <div id='sidebar'> 
    <p> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore 
     magna aliqua. Ut enim ad minim veniam," 
    </p> 
    </div> 

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

</body> 
</html>

來源

2011-09-18 Andy

使用此CSS

#content 
    { 
    float: left; 
    width:480px; 
    margin-right:20px; 
    } 
    #sidebar 
    { 
    float: left; 
    width:260px; 
    }

兩個要素應左浮動，第一個將有一個保證金的權利。

來源

2011-09-18 20:00:12

它很好用，你能解釋爲什麼兩個元素都應該向左浮動嗎？以及你的代碼中發生了什麼，我的代碼沒有這樣做，再次感謝你的回答。 – Andy

因爲如果你浮動左邊的兩個，它們將彼此相鄰，像正確的寬度（不大於父div的大小）並排。如果你有浮動t和浮動左邊你可以得到你想要的結果，但我認爲這很容易與我的解決方案 –

好，很酷，感謝您的幫助。 – Andy

問題在於您在#content上使用margin。在邊距爲260px的情況下，#content的外部寬度變爲760px，這是父級#container的整個可用內部寬度。在頁面流程中，您的#sidebar在#content之下，因爲沒有足夠的空間讓兩個元素並排存在。

降margin-right從#content和事情應該顯示你想要的。

請記住，這個配置很緊，當你引入改變的任何#content或#sidebar（包括border，padding和margin。唸叨CSS box model將幫助您最大寬度任何CSS屬性將再次突破更好地理解發生了什麼

來源

2011-09-18 20:15:27

遇到一些麻煩讓兩個div彼此相鄰浮動

回答

相關問題