Question

我正在制作一个标题栏，左侧，中间和右侧的链接。每个由div分隔。

向左浮动没问题，以第二个div为中心没问题。但是当我尝试将最后一个div向右浮动时，它正在清除其他div并且不在我的标题内。为什么是这样？它必须是我想念的简单的东西？非常感谢你

HTML

 <div class="header-fixed">
        <div class="header-container"> 

            <div class="nav-float-left">
              <div id="search">
                  <span>search</span>
              </div>    
            </div>
            <div class="nav-center">
                <a href="">title</a>
            </div>

            <div class="nav-float-right">

                  <a>
                        <span>more</span>
                  </a>                   
             <div>

        </div>
    </div>

CSS

.header-fixed {
    height:56px;
    border-top: 1px solid #222;
    width: 100%;
    background: green;
    position: fixed;
}
.header-container {
    width: 700px;
    margin: 0 auto;
    height: 56px;
}


.nav-float-left {
    float:left;
    height: 56px;
    color: rgba(255, 255, 255, .55);
    font-family:'Museo Sans W01 300',san-serif;
    font-size: 13px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
    filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);  
}


.nav-center {
    letter-spacing: 0.05em;
    margin: 0 auto;
    height: 43px;
    width: 100px;
    padding-top: 13px;
    background: black;
    color: #d4d2d2;
    font-size: 29px;
    font-family: “Lucida Grande”, sans-serif; 
    text-align: center;
    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    -webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    -o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    -moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    cursor: pointer;
}
.nav-center .ss-pika {
    font-size: 17px;
    margin-left: 1px;
    margin-right: 0px;

}
.nav-center a {
    display:block;
}

.nav-float-right {
    position:relative;
    float:right;
    height: 55px;
    width: 205px;
}

Answer 1

中心div将位于浮右div之上，因为它是一个块元素，并且块元素不是内联的。

四处走动是首先添加浮动右元素。

<div class="nav-float-left">
    <div id="search">
        <span>search</span>
    </div>  
</div>
<div class="nav-float-right">
    <a><span>more</span></a>                   
<div>
<div class="nav-center">
    <a href="">title</a>
</div>

Answer 2

如果使用float，您还需要设置display属性以便按照自己的意愿进行操作。我通过添加display:inline-block来改变你的小提琴。

您可能会注意到需要为div设置尺寸width（高度可选）。

此处：Fiddle

Answer 3

您可以使用display:table;，display:table-cell;代替浮点数来排列单行元素：

Fiddle

Answer 4

试试这个

.nav-float-right {
    position:relative;
    float:right;
    height: 55px;
    width: 205px;
    bottom: 57px;
    left: 12px;
}

您可以通过设置bottom和left属性来调整正确的div。

菲德尔：http://jsfiddle.net/GX9xn/6/

Answer 5

请尝试FIDDLE

CSS文件略有变化

.nav-float-right {
    position:absolute;
    float:right;
    height: 55px;
    width: 205px;
    right:0;
    top:0;
    background: #fff;
}

CSS浮动问题，浮动右边是清除我的其他浮动但没有浮动：清除

5 个答案:

Fiddle