css能不能實現左邊div固定寬度,右邊div自適應撐滿剩下的寬度

時間 2021-05-30 19:31:30

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"

>td>td>tr>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>

>.left

.right

style

>

10樓:影雪紛飛

兩個元素都display:block,左側的float:left,寬度寫死。右側的width:auto,margin-left等於左側元素的寬度

11樓:

左固定右自適應方法真的太多。float,table,position,flex,grid,這些都能搞出來。具體怎麼實現自己先試試。

12樓:何凱

之前隨手一答,好多贊 #^_^# 補充下,免得誤人子弟。

上面這種方式還要考慮到清除浮動。

不考慮瀏覽器相容性的話也可以用 flexboxhttp://

13樓:

考慮相容性的可以使用雙飛翼布局,相容到ie6,不考慮的可以使用css3的flex布局。如果是移動端建議使用flex布局,

14樓:悠然屋

今天碰到一例子這樣也可以實現:

.left

.con

con的width不能設定為100%,不然另起一行,overflow的清除浮動跟clear:both效果還是不一樣,

.left{float:left;width:

380px}.catainer{float:left;width:

100%;margin-left:-380px;}手機打

人類能不能實現徹底完全的法制?

等乙個錦鯉包 法治社會以法律為基礎。有一句話,道德律己,法律律他。法律是道德的底限 道德和法律中間的那一點,是留給人性的空間。無人治只有法治 要麼社會崩塌,私德和公德混亂,要麼法制德的底限提高,毫無個人空間。完全法制是不現實的 桃落六蒼v 首先,是 法治 不是 法制 對於能不能實現法治,當然是有可能...

我的想法能不能實現找到100億

風者 沒問題,我舉雙手鼓勵支援,至於說建議的話,就是根據各階段的實際完成情況,不斷反饋修改。比如你可以先按你的計畫做好第一步,也就是你說的 首先第一步是禁慾,這樣子效率可以達到最大化,就可以在家自學了,每天也要堅持鍛鍊,而且要保證利益最大化的。再養養顏值,不吃任何新增劑的東西,人的品行也在書中學到。...

能不能實現,在gitlab中 clone和push都不需要密碼,我都已經把專案改成public,怎麼還是這樣

劉子瑜 git config global credential.helper store永久儲存 git config global credential.helper cache timeout 3600 個小時 Labor Bad 在 C Documents and Settings Admi...