CSS：是否可以有3列布局，左列和中間列都可靈活填充空間？

可以在中間列上使用position:absolute和left和right來設置它與父div相關的結束位置。CSS：是否可以有3列布局，左列和中間列都可靈活填充空間？

但是，我希望能夠讓左側列的左側結束，左側列可以調整（根據其內容）。

這似乎是一個非常基本的東西，但從我的理解是沒有辦法做到這一點沒有flexboxes。這是真的？有沒有什麼我可以做巧妙的嵌套語義上多餘的元素和某些樣式設置爲auto？

2012-06-29 Steven Lu

如果右div有一些設置寬度（以％或PX），那麼，你可以讓左div的寬度由它的內容，同時又讓中心div填寫的剩餘空間來定義：

#right { 
    position: absolute; /* position in top right corner */ 
    top: 0; 
    right: 0; 
    width: 80px; 
} 
#center { 
    margin-right: 80px; /* same as #right width */ 
} 
#left { 
    float: left; 
}

jsFiddle DEMO

來源

2012-06-29 03:10:39 jackwanders

將如何變局，如果我想正確的股利可調也？我們是否可以將左邊的兩個cols放在另一個div中，然後浮動？ –

是的，但在這一點上，您將不得不按照DOM層次結構排列元素。正確的div會先來，然後是一個包裝div，它將包含左側和中間的div。左側和右側都會根據其內容進行調整，中心div佔據剩餘空間。看到這個演示：http://jsfiddle.net/jackwanders/JFCHw/1/ – jackwanders

這真是太棒了。謝謝！ –

從我可以告訴你最好用簡單的浮動塊。如果你想把它們全部放在一起，你可以將它們包裝在一個絕對的容器中，並將它們浮在裏面。也許我只是不明白爲什麼你需要他們絕對定位，但這似乎是一個可行的選擇。

來源

2012-06-29 03:08:59 Chad

CSS：是否可以有3列布局，左列和中間列都可靈活填充空間？

回答

相關問題