有三列

Question

創建網頁的標題這是style.css：

#top{ 
    background: white; 
    text-align: center; 
    height: 180px; 
    border-bottom: solid 1px #efeecc; 
} 

#topLogo{ 
    background: yellow; 
    width: 25%; 
    float:left; 
} 

#topDescription { 
    background: red; 

    width: 75%; 
    text-align: center; 
} 

#topDepartment { 
    background: blue; 
    float:right; 
    width: 25%; 
    text-align: right; 
} 

這是index.html：

<div id="top"> 
    <div id="topLogo"> 
     <a href="index.html"><img src="img/book.jpg" width="170" height="160" border="0"/></a> 
    </div> 
    <div id="topDescription"> 
     Page title 
    </div> 
    <div id="topDepartment"> 
     Category   
    </div> 
</div> 

這是預期的結果：

這是當前的結局：

http://jsfiddle.net/p2T5q/

Answer 1

這裏有一個演示：http://jsfiddle.net/p2T5q/7/

CSS：

#top{ 
    background: white; 
    text-align: center; 
    display:table; 
    height: 180px; 
    border-bottom: solid 1px #efeecc; 
} 

#topLogo{ 
    background: yellow; 
    width: 25%; 
    display:table-cell; 
} 

#topDescription { 
    background: red; 
    display:table-cell; 
    width: 50%; 
    text-align: center; 
} 

#topDepartment { 
    background: blue; 
    display:table-cell; 
    width: 25%; 
    text-align: right; 
} 

​​

Answer 2

好吧，快速的答案是你的div的總寬度是125％，所以你需要改變它，所以它等於100％。

其次，您可能想要明確修復該頂部div，因此它包含所有浮動的div。

另外，不要使用內聯樣式，因爲您可以將它們放在CSS文件中。您將固定寬度放置在位於具有百分比寬度的div內的圖像上。如果用戶減小了他的視口的大小，那肯定會中斷。

Answer 3

在這裏，你走了，我定了小提琴和複製這裏的答案：

http://jsfiddle.net/p2T5q/2/

#top{ 
    height: 180px; 
    border: solid 1px #555555; 
    position:relative; 
} 
#top * { 
    float:left; 
} 
#topLogo{ 
    background: yellow; 
    width: 25%; 
} 
#topDescription { 
    background: red; 
    width: 50%; 
} 
#topDepartment { 
    background: blue; 
    width: 25%; 
} 

基本上確保寬度百分比加起來爲100％，浮所有元素離開，讓他們知道關於他們應該定位的內容。您可以使用*來選擇所有子元素。我會很感激你接受這個答案，所以我終於可以得到我的50個該死的硬幣並發表評論，哈哈。