隨着跨度的CSS Div

我想佈局一個簡單的三列標題，但有些不是很正確。隨着跨度的CSS Div

HTML（忽略可怕的W3C uncompliance）：

<html> 
<body> 
<div id="header"> 
    <span id="left">Page Title</span> 
    <div id="center">Logged in as</div> 
    <span id="right"><a href="logout.php">Logout</a></span> 
</div> 
</body> 
</html>

CSS：

#header { 
padding: 6px; 
background-color: #BBB; 
} 

#left { 
float: left; 
} 

#center { 
text-align: center; 
} 

#right { 
float: right; 
}

這幾乎工程，除#right下拉一條線，並打破了整個事情。我不知道如何解決這個問題，而且我還沒有做過多浮動的佈局，所以請耐心等待。

有什麼想法？

來源

2011-03-09 skeggse

移動元素的順序。對中心DIV

例這裏的頂部浮動權SPAN：http://jsfiddle.net/htxFJ/

來源

2011-03-09 06:09:55 JohnP

嘗試移動你的「正確」的div所以它首先被定義：如果你理解盒模型

<div id="header"> 
    <span id="right"><a href="logout.php">Logout</a></span> 
    <span id="left">Page Title</span> 
    <div id="center">Logged in as</div> 
</div>

來源

2011-03-09 06:11:13

，你會知道這是display: block - >div上默認的元素的預期行爲。

帶有display: block（塊元素）的元素的行爲與頁面上的矩形塊類似，並且水平展開以佔用所有可用空間。因此，他們將所有後續元素替換爲下面的下一個可用空間。

span的默認設置爲display: inline的情況也是如此。內聯元素的行爲不像「矩形」 - 它們像文本一樣流動。

因此，在您的情況下，您有幾個選擇：將中心寬度div設置爲固定值或百分比。但這不是解決設計問題的正確方法。看看few three column佈局和研究他們的HTML和CSS。

乾杯！

來源

2011-03-09 06:13:45 jrharshath

這是因爲範圍#center不是浮動的。把它像下面這樣：

#center { 
    text-align: center; 
    float: left; 
    }

來源

2011-03-09 06:14:01 Kangkan

這不起作用，因爲#center然後從文件流中去除。 – skeggse 2011-03-09 06:15:26

<html><style>UR CSS</style><body><div id="header"> 

<span id="left">Page Title</span> 
<div id="center">Logged in as 
<span id="right"><a href="logout.php">Logout</a></span> 
</div>

來源

2011-03-09 06:17:42 Poonam

隨着跨度的CSS Div

回答

相關問題