並排放置3個div

Question

我想使用CSS並排放置3個div。我已經經歷了很多帖子，但沒有爲我的項目工作。

#quotescointainer{ 
    width: 100%; 
    font-size: 12px; 
} 
#quotesleft{ 
    float:left; 
    width: 33%; 
    background-color: white; 
} 
#quotescenter{ 
    background-color:white; 
    width: 33%; 
} 
#quotesright{ 
    float:left; 
    width: 33%; 
} 

以上不會將div放在正確的位置。我似乎無法弄清楚我正在犯的錯誤。

Answer 1

你可以float: left所有內div S：

http://jsfiddle.net/W8dyy/

你應該修正拼寫quotescointainer至quotescontainer。

#quotescointainer{ 
    width: 100%; 
    font-size: 12px; 
    overflow: hidden; /* contain floated elements */ 
    background: #ccc 
} 
#quotesleft { 
    float: left; 
    width: 33%; 
    background-color: #bbb; 
} 
#quotescenter { 
    float: left; 
    background-color: #eee; 
    width: 33%; 
} 
#quotesright{ 
    float: left; 
    width: 33%; 
    background-color: #bbb; 
} 

Answer 2

我最近問完全相同的問題。

這裏是一個鏈接：

Inline div elements

這是我接受的答案：

設置CSS顯示樣式 顯示：inline-block的;.

這允許元素保持它的 塊狀功能，同時也允許它內聯顯示 。 這是兩個之間的中途房子。

（但要注意，有一些 兼容性問題與舊 版本的IE）

Answer 3

使用CSS網格的出現，這可以更好地實現它，而不是使用display: inline和float。

https://jsfiddle.net/dxec62vk/

人們也爲grid現在好了瀏覽器的支持：https://caniuse.com/#feat=css-grid