CSS浮動時髦

我的浮動行爲奇怪（嗯，我猜他們正在表現他們應該如何），但我似乎無法理解爲什麼。出於某種原因，包含「亞歷克斯」的div盒總是下到另一行。有什麼我搞砸了嗎？CSS浮動時髦

的style.css

.clear { 
    clear:both; 
} 
.page-header { 
    width:100%; 
    background:#efefef; 
    border-bottom:1px #ddd solid; 
    padding:3px 10px; 
    margin-bottom:24px; 
} 
.page-header-title { 
    width:200px; 
    float:none; 
} 
.page-header-search { 
    float:left; 
    width:100px; 
} 
.page-header-top_menu { 
    float:right; 
    width:200px; 
}

的index.html

<div class="page-header"> 
     <div class="page-header-search"> 
      blah 
     </div> 

     <div class="page-header-title"> 
      Calender 
     </div> 

     <div class="page-header-top_menu"> 
      Alex 
     </div> 

     <div class="clear"></div> 
    </div>

非常感謝你。

來源

2013-03-04 Alex

'page-header-title'不是浮動的，但當你浮動它時也起作用。編輯：http://jsfiddle.net/F72zJ/ – Kroltan 2013-03-04 01:21:25

如果用

float: left;

爲「壓延」 -div交換

float: none;

的「亞歷克斯」表現更好。

你沒有指定它應該是什麼樣子。

http://jsfiddle.net/wDp3p/ < <我用紅色邊框顯示了你的div結構。

http://jsfiddle.net/wDp3p/1/ < < version with float：left;

「float」並非真正適用於表列而是浮動的解決方案 - 因此「壓光機」-div會在其左手前一個元素之後直接浮動。

來源

2013-03-04 01:24:14 Michael

你錯了。您應該將float財產分配給.page-header-title。

來源

2013-03-04 01:22:47 Terry

回答

相關問題