2012-03-16 72 views
10

當使用流體佈局時,我想要使用[left | content | right]和[left | content]或[content | right]等不同的佈局,「單元格」之間的水槽也是流體並具有百分比值。但我想在左/右和內容區域之間有一個固定的寬度,例如10px或20px。引導程序:固定流體佈局中的排水溝寬度?

任何建議如何使這項工作?我已經嘗試過它,但總是以大幅改變的元素結束。

回答

20

Answered a question like this before,它基本上下來也被創建了一組類取決於你有多少側邊欄有抵消主容器,就像這樣:

CSS

.fixed-fluid { 
    margin-left: 240px; 
} 
.fluid-fixed { 
    margin-right: 240px; 
    margin-left:auto !important; 
} 
.fixed-fixed { 
    margin: 0 240px; 
} 

Demo,編輯here

+0

該演示,我怎樣才能使3列在主要內容也有一個只有20px的天溝,而不是流體?我猜的側邊欄與上面顯示的技術相同?這個週末去玩吧。基本上我想了解如何使用一些流體柱,但是使它們的內容具有固定的排水溝空間。 – burzum 2012-03-16 19:07:02

+0

@burzum im confused,你的意思是你如何得到一個固定的容器?與現在的方式相反?如果你看看'fixed-fixed'類邊距,你可以看到它被設置爲'margin:0 240px;',側邊欄都是寬度爲220px,再加上一個額外的20px(總計240px)的邊距以形成您在主容器周圍看到的排水溝。 – 2012-03-16 19:13:19