爲什麼列不會粘在右邊

我對CSS非常陌生。我有一個問題，我只是用div的打在這裏，我有這些：爲什麼列不會粘在右邊

<html> 
<head> 
    <title>My web page</title> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 
    <div id = "first"> 
     <div id= "second"></div> 
     <div id="third"></div> 
     <div id="fourth"></div> 
     <div id="fifth"></div> 
     <footer></footer> 
    </div> 
</body>

，這是CSS：

#first 
{ 
    width:600px; 
    height:400px; 
    background-color:#666; 
    margin:auto; 
    position:relative; 
} 

#second 
{ 
    width:100%; 
    height:20%; 
    background-color:yellow; 
    position:relative; 
} 


#third 
{ 
    margin:auto; 
    width:15%; 
    height:70%; 
    background-color:#00FF00; 
    position:relative; 
    margin-left:0; 
    display:inline-block; 
    float:left; 
} 

#fourth 
{ 
    width:70%; 
    height:70%; 
    position:relative; 
    display:inline-block; 
    margin:auto; 
    background-color:red; 
} 

#fifth 
{ 
    margin:auto; 
    width:15%; 
    height:70%; 
    background-color:#E0AF00; 
    position:relative; 
    display:inline-block; 
    float:right; 
} 

footer 
{ 
    background-color:black; 
    height:10%; 
    clear:both; 
}

的問題是，右列，去在下面並且不堅持正確的，問題是什麼？

來源

2014-02-21 arocketman

，我可以看到你是新的HTML :)也 –

是的，我肯定是。 – arocketman

將元素#third和#fifth移動到HTML標記的頂部。這兩個div具有float: left|right屬性，所以將它們移動到#fourth div之上是最方便的。

<body> 
    <div id="first"> 
     <div id="second"></div> 
     <div id="third"></div> 
     <div id="fifth"></div> 
     <div id="fourth"></div> 
     <footer></footer> 
    </div> 
</body>

我更新的代碼，這裏的JSFIDDLE表明，它的作品。注意，我還刪除了所有display: inline-block屬性以刪除<footer>上方的不需要的空白。

這裏有一個關於這個問題的浮動直觀例子：

enter image description here

來源

2014-02-21 13:53:52 matewka

你能解釋爲什麼嗎？ – arocketman

因爲沒有浮動的元素是'block'元素。他們打算在行中被單獨處理。如果一個帶有'float：right'的元素放置在'block'元素的下面，它不能強制'block'元素在同一行中爲它創建一些空間。 – matewka

非常感謝！你真的很有幫助。 – arocketman

爲什麼列不會粘在右邊

回答

相關問題