保證金0自動踢球浮動：對一個新線

嘿傢伙我試圖水平對齊3個盒子之間的一點點空白。爲此，我嘗試使用float：left作爲第一個邊距：auto爲中間的一個，float：爲最後一個框的右邊。前兩個盒子顯示完美，但第三個盒子漂浮在一條新線上。有沒有什麼辦法解決這一問題？謝謝！保證金0自動踢球浮動：對一個新線

HTML：

<div class="boxQ"> 
     <p class="boxText">quality.</p> 
    </div> 

    <div class="boxS"> 
     <p class="boxText">speed.</p> 
    </div> 

    <div class="boxSim"> 
     <p class="boxText">simplicity.</p> 
    </div>

CSS：

.boxQ { 
    float:left; 
    width:30%; 
    height:400px; 
    background-color:#C60; 
} 

.boxS { 
    margin: 0 auto; 
    width:30%; 
    height:400px; 
    background-color:#6CC; 
} 

.boxSim { 
    float:right; 
    width:30%; 
    height:400px; 
    background-color:#FC6; 

}

來源

2013-10-06 kduan

只需重新排序您的div（無需CSS改變）是：

<div class="boxQ"> 
    <p class="boxText">quality.</p> 
</div> 
<div class="boxSim"> 
    <p class="boxText">simplicity.</p> 
</div> 
<div class="boxS"> 
    <p class="boxText">speed.</p> 
</div>

jsFiddle example

來源

2013-10-06 21:32:13 j08691

我認爲這將是我想要解決這個問題的最後一個細節！你能解釋爲什麼這個工作，而不是我原來的？ – kduan

@kduan - 當然，給我一分鐘，我會添加一個解釋。 – j08691

通過在非浮動元素之前放置浮動元素，可以讓它們垂直出現在同一位置，並且還允許非浮動div浮起並佔據之間的剩餘空間。按照元素的原始順序，非浮動元素（速度）浮起來佔據第一個浮動元素（質量）旁邊的空間，然後強制浮動的最後一個元素（簡單div）被強制置於下方非浮動元素。 – j08691

保證金0自動踢球浮動：對一個新線

回答

相關問題