浮动div左边，其他div右边

我想调整我的菜单的浮动部分左边，其他部分右边。但是，我无法让它工作。浮动div左边，其他div右边

我一直在尝试使用float来完成它，但我无法完成它的工作。

我该如何以正确的方式做到这一点？

HTML

<div class="topbar"> 
    <div class="title">Title</div> 

    <div class="topbar-boxes"> 

     <div class="topbar-boxes-left"> 
      <div class="topbar-box">Box1</div> 
      <div class="topbar-box">Box2</div> 
      <div class="topbar-box">Box3</div> 
     </div> 

     <div class="topbar-boxes-right"> 
      <div class="topbar-box">Box1</div> 
      <div class="topbar-box">Box2</div> 
      <div class="topbar-box">Box3</div> 
     </div> 

    </div> 

    <div style="clear:both"></div> 
</div>

CSS

.topbar { 
    width: 100%; 

    padding: 14px; 

    font-size: 18pt; 
    color: white; 

    background-color: rgba(42, 42, 42, 0.95); 
} 

.title { 
    float: left; 
    padding-right: 50px; 
} 

.topbar-boxes { 
    float: left; 
    margin: -14px; 
} 

.topbar-boxes-left { 
    float: left;  
} 

.topbar-boxes-right { 
    float: right; 
} 

.topbar-box { 
    float: left; 

    padding: 20px; 

    border-left: 1px solid black; 

}

http://jsfiddle.net/8eqSN/

来源

2014-02-06 Maeh

了解[如何]（http://stackoverflow.com/a/16568504/1542290）了解浮动工作原理。 –

尝试将float用于您的某个类，而不是将它用于所有类 –

你的问题是因为你浮在.topbar-boxes股利。浮动时，元素的长度尽可能薄（而不是像通常所期望的那样填充页面的宽度），因此浮动正在工作，您不能看到它，因为父项div只和子元素一样宽。

要修复，删除该浮动：

.topbar-boxes { 
    /*float: left; <----- remove this.*/ 
    margin: -14px; 
}

来源

2014-02-06 14:08:22

这是因为float要素依赖于母公司的width被定位，因为箱子topbar-boxes的父浮动过它width不是100％。

根据您的结构和自丝毫不差浮动太大，我建议你删除该容器中，一切工作正常服用缘上的其他人：

.topbar-boxes-left { 
    margin: -14px; 
    float: left;  
} 
.topbar-boxes-right { 
    margin: -14px; 
    float: right; 
}

入住这Demo Fiddle

来源

2014-02-06 14:10:27 DaniP

容器div（.topbar-boxes）的宽度为：auto，默认情况下在每个元素中。这意味着它的宽度将与其内容一样多。

尝试在.topbar框中设置宽度：100％。

来源

2014-02-06 14:23:33 Wakkos

浮动div左边，其他div右边

回答

相关问题