3 DIV液體設計

我製備3周的div（COL）使用具有固定尺寸左和右的div設計，居中的div如液體（以％計）爲：3 DIV液體設計

.left{ 
width:10px; 
float:left; 
} 

.right{ 
width:10px; 
float:left; 
} 
.center{ 
width:100%; 
float:left; 
}

HTML代碼：

<div class="left"> LEFT </div> 
<div class="center">CENTER</div> 
<div class="right"> RIGHT  </div>

但它被垂直表示的div（在單獨的線）爲：

left div 
centered div (occupying whole page) 
right div

如何dispaly他們在水平的方式爲：

left div  centered div  Right div

感謝...

來源

2012-03-06 a Learner

10px的+ 100％+ 10px的=超過100％的頁面的寬度。由於中間元素是100％的元素，因此它將其他元素放在其上/下。 – 2012-03-06 15:17:48

您是否嘗試過爲中間div設置'width：auto'？ – 2012-03-06 15:23:50

看看這篇文章：[與邊界等高的列]（http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/ ）。第3項是3列。 – DwB 2012-03-06 15:33:29

其邏輯是不可能的。

如果中心格是100％的寬度，有更好的你指定%所有的寬度沒有空間.left和.right

它。使他們完美地重合。

.left{ 
width:1%; 
float:left; 
} 

.right{ 
width:1%; 
float:left; 
} 
.center{ 
width:98%; 
float:left; 
}

更新：因爲，目標是讓在.center流體容器。這裏是solution。

來源

2012-03-06 15:17:37 Starx

我認爲目標是具有流體中心的固定寬度的柱子，所以比這更棘手。 – 2012-03-06 15:20:26

沿着這樣的思路，如果你想要所有的'div'均勻地分開，所有的使用'width：33％'。 – Rob 2012-03-06 15:21:16

@Mike：你錯過了1％......所以不太平。另外，誰在談論這個？ – 2012-03-06 15:22:56

通過在div.center上設置width:100%;，您將其強制設置爲其容器的整個寬度，而不會讓其他divs浮在其旁邊。

一個不錯的選擇是在容器中嵌套div.right和div.left。

<div class="center"> 
    CENTER 
    <div class="left">LEFT</div> 
    <div class="right">RIGHT</div> 
</div>

考慮下面的CSS：

.center { 
    width:100%; 
    background-color:red; 
} 

.left { 
    width:100px; 
    float:left; 
    background-color:green; 
} 

.right { 
    width:100px; 
    float:right; 
    background-color:blue; 
}

這會消耗頁的整個寬度，同時允許左，右列的固定像素寬度。

來源

2012-03-06 15:21:05 cantlin

我想你的意思是這樣的：

現場演示jsfiddle

您可以從.main刪除text-align:center，並與padding玩到你的文字對齊你想要的方式。

HTML

<div class="main"> 
    <div class="left">LEFT</div> 
    CENTER 
    <div class="right">RIGHT</div> 
</div>

CSS

.main { 
    position: relative; 
    padding: 0 40px 0 40px; 
    background: red; 
    min-height: 100px; 
    text-align: center; 
} 

.left, .right { 
    top: 0; 
    bottom: 0; 
    width: 40px; 
    position: absolute; 
} 

.left { 
    left: 0; 
    background: green; 
} 

.right { 
    right: 0; 
    background: blue; 
}

來源

2012-03-06 15:23:19 Bazzz

可能不是：http://jsfiddle.net/kFPke/2/ – 2012-03-06 15:24:49

@Madmartigan從'.main'移除'height'。我更新了我的答案。 – Bazzz 2012-03-06 15:27:22

沒有骰子：http://jsfiddle.net/kFPke/4/這些佈局可能會非常棘手。通常情況下，包裝divs需要將相同高度的實體放在一起。 – 2012-03-06 15:29:37

看看這個 - 你可能會發現這些預先製作的解決方案最好：http://matthewjamestaylor.com/blog/perfect-3-column.htm

來源

2012-03-06 15:30:40 scottcarmich

這些佈局非常穩固，我已經多次使用該網站。即使你的答案沒有太多，+1，因爲我會建議通過其他人已經提出的任何脆弱的佈局。 – 2012-03-06 15:52:19

你可以這樣做像這樣：

.left { 
    float: left; 
    width: 100px; 
} 

.right { 
    float: right; 
    width: 100px; 
} 

.center { 
    padding: 0 100px; // Same value as width of left and right 
}

希望幫助:)

來源

2012-03-06 15:31:09 will

這個怎麼樣

<div style='border:1px solid red;float:left;'>Left</div>
<div style='border:1px solid blue;float:right'>Right</div>
<div style='border:1px solid green;'>Center<div>

JSFiddle

來源

2012-03-06 15:32:23 FosterZ

這是由Glish早在99年完成。

#left{ 
    position: absolute; 
    width:10px; 
    top: 0px; 
    left: 0px; 
} 

#right{ 
    width:10px; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 

#center{ 
    margin-left: 11px; 
    margin-right: 11px; 
} 

... 

<div id="left"> LEFT </div> 
<div id="center">CENTER</div> 
<div id="right"> RIGHT  </div>

我做了一個的jsfiddle，而是因爲你在那裏有文本，將本身是大於10px的寬，我沒有理會包括它。它雖然工作。它也應該在任何塊元素內工作。

來源

2012-03-06 15:38:36

退房這一個 - http://jsfiddle.net/Jn7Bq/4/

<div class="left"> LEFT </div> 
<div class="center"> CENTER </div> 
<div class="right"> RIGHT </div>

CSS

.left{ 
width:100px; 
background:red; 
float:left; 
} 
.right{ 
width:100px; 
background:red; 
float:right; 
} 
.center{ 
position:absolute; 
left:100px; 
right:100px; 
background:green; 
}

實驗

來源

2012-03-06 16:00:23

3 DIV液體設計

回答

相關問題