0
我一直在嘗試創建三列CSS佈局的不同方式。在Youtube上，我發現了一個video，這是在沒有包裝的情況下實現的。我一直在試圖將「left」div列浮動到左側，然後將「content」div列（這是html代碼中的第二個）放在右側。根據視頻的結果是，沒有浮動的列 - 在這種情況下，「右」div列將自動在另外兩個列之間出現，只需要一個保證金0自動定位它。將中心DIV列置於左右浮動列之間的位置？
你可以到4:20以後看視頻。
但是，這不會發生在我身上。出於某種原因，我的「右」div列有一個趨向包裝並最終在頁面的其他地方 - 通常在身體區域之外，並進入HTML背景顏色。我知道這可以通過將「正確的」DIV列浮動到左邊來解決，但我想知道爲什麼我無法實現此目的，因爲在視頻中沒有我的「正確」div會在頁面中途結束並在身體區域之外。
的代碼是在這裏
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Three Column!
</title>
<link type="text/css" rel="stylesheet"
href="style.css" media="screen">
</head>
<body>
<div id="header">
<h1>Lorem Ipsum</h1>
</div>
<div id="left">
<p>
<ul>
<li>Here</li>
<li>There</li>
<li>Everywhere</li>
</ul>
</p>
</div>
<div id="content">
<p class="paragraphs">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
<div id="right">
<h2>Ad Content</h2>
<p class="Paragraphs">At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer"><p>Footer</p></div>
</body>
</html>
，然後CSS
html, body
{
height : 100% ;
margin : 0 ;
padding : 0
}
html { background : silver }
body
{
background : black ;
color : white ;
height : 780px ;
width : 1620px ;
margin : 0 auto 2em ;
font : 16px "Arial", sans-serif ;
}
#header
{
text-align : center ;
background : purple ;
padding : 3px 0px ;
margin : 100px 0 10px
}
#left
{
float : left ;
margin-right : 45px ;
width : 180px ;
height : 660px ;
background-color : olive ;
padding : 5px
}
#content
{
float : right ;
background-color : gray ;
height : 660px ;
width : 1140px ;
padding : 5px
}
#right
{
width : 180px ;
background-color : blue ;
height : 660px ;
padding : 5px
}
#footer
{
background-color : black ;
clear : both
}
#footer p { text-align : center }
請提取的問題，必要的代碼只有部分，並把它們放在一個代碼段。 – light
我明白你的觀點。我不知道代碼中究竟出現了哪些錯誤，但將來會嘗試減少代碼。 –