CSS Float 4 divs

Question

我在我的網站的頁腳div中有4個div，我不能讓浮動板正常工作，所以它們可以正確地坐。

這是結構;

<div class="footer"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </div>

股利一個需要是整個寬度和運行其他三個應所有坐彼此相鄰佔用每個頁面的三分之一以上的頁面的整個長度。

有關處理此問題的最佳方法的任何建議？

Answer 1

爲什麼不是簡單的喜歡：

#one { 
    width: 100%; 
} 

#two, #three, #four { 
    width: 33.33%; 
    float: left; 
} 

輸出可以看出here。

您還可以通過利用.footer div:nth-of-type(1)，而不是與未知的DIV名擴展此：

.footer div:nth-of-type(1) { 
    width: 100%; 
} 

.footer div { 
    width: 33.33%; 
    float: left; 
} 

我創建了一個可擴展的輸出here。

希望這會有所幫助！

Answer 2

所有你需要做的是浮動#two,#three,#four並分配33.3％的寬度，但你可能還想通過overflow: auto;或其他一些其他的clearfix技術來清除.footer的溢出。

.footer { 
    overflow: auto; 
} 
#two,#three,#four { 
    float: left; 
    width: 33.33%; 
} 

或者，你可以用Flexbox的做到這一點

.footer { 
    display: flex; 
    flex-wrap: wrap; 
} 
#one { 
    width: 100%; 
} 
#two,#three,#four { 
    flex-grow: 1; 
    flex-basis: 0; 
}