浮動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右邊

回答

相關問題