1樓:joe06102
在不用新特性的情況下,@lyhper 感覺是最簡潔的。
我在這裡再說乙個費勁點的:https://jsfiddle.net/joe06102/4r593qe3/
="wrap" > ="fix" >div> ="auto" >div> div> .wrap .fix .auto 比較費勁的就是由於strut的存在,需要設定固定寬度那列的vertical-align 2樓:大蛇 題主,解決了嗎?在bootstrap中,看了下大神的回答,雖然知道可以用聖杯布局,可我也是關心bootstrap中,是否提供類似的方案,因為我現在碰到也是左側固定,但只是在乙個範圍,其他有不用,好奇 3樓:阿爾法劍客 固定設浮動,自適應設margin,浮動dom先行。 自適應和固定寬度三句真言。弄懂了這個,不管怎麼左自適應,右自適應,三段自適應。全部可以搞定 4樓: 1、左側左浮動,右側距離左側的margin值為左側的固定寬度。 2、左側固定寬度絕對定位,右側絕對定位,left的值是左側的寬度。 .left .right 這兩種方法足夠了(吐槽下,知乎手機端編輯器竟然無法複製自己剛剛編輯的內容。。。。) 5樓:Jim Liu 這是我經常用來做面試題的題目,當然,多數時候我會考「兩邊定寬,中間自適應」,比這個需求稍微難一點。 「傳統」的實現可以使用絕對定位、負邊距等多種方法,「現代」的實現是使用flex。 6樓:小小的寂寞 其實還有一種比較複雜的,優點是相容性好 (IE6+),沒有 overflow: hidden 帶來的其他問題,適合場景是需要把主內容區域放在 sidebar 之前的情況: ="outer" > ="main-container" > ="main" >div> div> ="sidebar" >div> div> CSS: .outer .outer :after .main-container .main .sidebar 7樓:Brizer 這個問題未免過於簡單。兩列布局考慮到相容性的話用雙飛翼類似的思想比較好。兩列布局雙飛翼 不考慮相容的話用flex比較方便。 8樓:何幻 看了一圈,又結合自己的經驗,總結了一下。 題主可以都了解下,實戰中,貴在選擇。 (1)使用float@柳宇航< divclass ="use-float" > div> div> div> .use-float >div: first-child .use-float >div: last-child (2)使用table class ="use-table" > >.use-table .use-table >tbody >tr>td: first-child (3)用div模擬table< divclass ="use-mock-table" > div> div> div> .use-mock-table .use-mock-table >div. use-mock-table >div: first-child (4)使用flex@何凱 ="use-flex" > div> div> div> .use-flex .use-flex >div: first-child .use-flex >div: last-child 效果圖:(在以上樣式基礎上,我又加了高度和邊框,才能看到下面的樣子。。。) 9樓: ="container" > ="left" >leftcont div> ="right" >rightcont div> div>
td> td>tr>table