如何在2列上使用像素度量標準填充3列布局以填充100％寬度？

Question

jsFiddle：

如果我使用div2 + Button2填充窗口寬度的其餘部分，如果我在第1列和第3列上使用像素度量？

我將使用它來格式化使文本框更改大小的表單，因爲其他兩個字段是固定的。

謝謝。

CSS

td { border:solid 1px #000; float:left; } 

#div1 { width:100px; border:solid 1px #000; float:left; } 
#div2 { border:solid 1px #000; float:left; } 
#div3 { width:100px; border:solid 1px #000; float:right; } 

#Button1 { width:100% } 
#Button2 { width:100% } 
#Button3 { width:100% } 

HTML

<div id="div1"> 
    <button id="Button1">Button 1</button> 
</div> 
<div id="div2"> 
    <button id="Button2">Button 2</button> 
</div> 
<div id="div3"> 
    <button id="Button3">Button 3</button> 
</div> 

Answer 1

據我所知，目前只有兩個辦法這樣做的：

1. 使用表格 - 大多數人不喜歡這個主意。我認爲對於整體佈局來說，只要你不會過度使用嵌套的表格和東西，就認爲它是很好的。卡勒的答案涵蓋了這個選項

2. 使用指定所有四個角的絕對定位。我只是最近才發現這種方法，它的工作非常好。它適用於所有主流瀏覽器。

東西like this：

#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; } 
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; } 
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; } 

Answer 2

我會敲定使用<table>，但是這是最靈活的，跨瀏覽器的方法。它工作在IE5 ^^

http://jsfiddle.net/hobobne/24urb/

Answer 3

這是一個使你們的想法:)

<div class="maincontainer"> 
    <div class="column01"> 
     <div class="restraint"> 
      <p>Left column</p> 
     </div> 
    </div> 
    <div class="column03"> 
     <div class="restraint"> 
      <p>Right column</p> 
     </div> 
    </div> 
    <div class="column02"> 
     <div class="restraint"> 
      <p>Middle column</p> 
     </div> 
    </div> 
</div> 

和CSS：

.maincontainer { 
position:relative; 
overflow:hidden; 
} 

.maincontainer .column01 { 
float:left; 
} 

.maincontainer .column01 .restraint,.maincontainer .column03 .restraint { 
width:200px; 
} 

.maincontainer .column03 { 
float:right; 
} 

.maincontainer .column02 { 
overflow:hidden; 
} 

.maincontainer .column02 .restraint { 
width:100%; 
} 

* html .maincontainer .column02 { 
display:inline-block; 
} 

Answer 4

另一種解決方案是移動第二個DIV到底部和將它的利潤率不浮動：http://jsfiddle.net/xC7uZ/6/

Answer 5

恩角城ejemplo vemos科莫PONER特雷斯columnas，德拉斯cuales，DOS蒂嫩玉野託菲霍。 三列，一列100％，兩列固定寬度。

jsfiddle

CSS

div, span, label, li, ul 
{ 
    box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

.cabecera 
{ 
    top:0px; 
    left:0px; 
    width:100%; 
    height: 100px; 
    display: table; 
    position: absolute; 
    border:1px solid orange; 
} 
.row 
{ 
    width:100%; 
    display: table-row; 
} 

.column_izq 
{ 
    width:60px; 
    height:100%; 
    display: table-cell; 
    white-space: nowrap; 
    vertical-align: middle; 

    border:1px solid black; 
} 
.column_izq .icono 
{ 
    width: 100%; 
    text-align: center; 

    border:1px solid red; 
} 

.column_center 
{ 
    width: 100%; 
    min-width:60px; 
    text-align:center; 
    display: table-cell; 
    vertical-align: middle; 

    border:1px solid black; 
} 
.column_der 
{ 
    width:60px; 
    height:100%; 
    display: table-cell; 
    white-space: nowrap; 

    vertical-align: middle; 

    border:1px solid black; 
} 
.column_der .logo 
{ 
    width: 100%; 
    text-align: center; 

    border:1px solid red; 
}