問題在對齊兩個分區水平對齊

Question

我試圖對齊兩個分區秒名稱和秒過濾器水平。

這裏是CSS：

div.sec-head { 
    background-repeat: repeat-x; 
    border: 1px solid #AFAFAF; 
    font-family: arial; 
    font-size: 12px; 
    height: 24px; 
} 
.sec-filters { 
    float: right; 
    //margin-top: -20px; 
    padding-left: 10px; 
    padding-top: 4px; 
} 
.clear-float { 
    clear: both; 
} 

的問題是在右側（仲丁基濾波器）位於左側的div仲丁基名稱下方的格。我期待兩個div水平對齊。

下面是HTML：

<div class="sec-head clear-float"> 
    <div class="sec-name">Heading</div> 
    <div class="sec-filters"> 
     <a href="#">1</a> 
     <a href="#">2</a> 
     <a href="#">3</a> 
     <a href="#">4</a> 
    </div> 
</div> 

JS-FIDDLE

Answer 1

使用display:table父和display:table-cell到子div

http://jsfiddle.net/9SdNZ/6/

Answer 2

嘗試增加

div.sec-head { 
    background-repeat: repeat-x; 
    border: 1px solid #AFAFAF; 
    font-family: arial; 
    font-size: 12px; 
    height: 24px; 
    vertical-align:top; 
} 
.sec-filters { 
    float: right; 
    //margin-top: -20px; 
    padding-left: 10px; 
    display:inline; 
} 
.clear-float { 
    clear: both; 
} 
.sec-name{ 
    display:inline; 
} 

Answer 3

默認的div具有寬度：100％。如果你想使用float來使它們出現在一行中，請添加它們的寬度。例如添加到兩個寬度：40％，並且都將是桃色。此外，我建議浮動：留在兩個，而不是1個左邊的浮動和1個右邊的浮動......但這只是一個品味問題。

Answer 4

選項1：

.sec-name,.sec-filters {  
    display:inline-block; 
    width:50%; 
} 
.sec-filters{ 
    text-align:right; 
} 

DEMO fiddle here.

選項2：

.sec-name { 
    float:left; 
} 
.sec-filters { 
    float:right; 
} 

DEMO here.

Answer 5

如果你想浮動DIV，一個辦法是 「自由」 的DIV：的位置是：絕對的;

，並把父 「.SEC頭」 內部 「absoluted」 分區設置家長對位置相對

CSS：

div.sec-head { 
    position:relative; 
} 

.sec-filters { 
    position:absolute; 
    top:0px; 
    right:0px; 
}