水平对齐两个Div的问题

Question

我试图水平对齐两个div sec-name 和 sec-filters 。

这是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-name下方。我期待两个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

选项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 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％，并且所有都将是桃子。另外我建议浮动：左边两个而不是一个浮动左边和一个浮动右边......但这只是一个品味问题。

Answer 4

将display:table用于父级，将display:table-cell用于子级div：

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

Answer 5

如果你想浮动div，一种方法是＃34;释放＆＃34; div：位置：绝对;

并且放弃＆＃34; absoluted＆＃34;父母内部的div＆＃34; .sec-head＆＃34;将父母的位置设为相对

的CSS：

div.sec-head {
    position:relative;
}

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