如何讓一個div可以調整，而其他成功的列固定？

幫助新手在div或php或html而不使用CSS或表格。如何讓一個div可以調整，而其他成功的列固定？

試圖做到這4個欄，使用分度以下行爲

// [.....adjustable....][fixed][fixed][fixed] 
// [.....adjustable....][fixed][fixed][fixed]

下面是我的代碼2×行------------------ ----------------------

<form action="welcome.php" method="get"> 

<div style="position: relative; width: 100%; "> 
    <div id="left" style="position:relative;float:left;width:68%;"> left </div> 
    <div id="right" style="float:left;width:13%;"> Name: </div> 
    <div id="right2" style="float:left;width:13%;"> Age: </div> 
    <div id="right3" style="float:left;width:6%;"></div> 
</div> 

<div style="position: relative; width: 100%; "> 
    <div id="left2" style="position:relative;float:left;width:68%;"> left2 </div> 
    <div id="right4" style="float:left;width:13%;"> <input type="text" name="name"></div> 
    <div id="right5" style="float:left;width:13%;"> <input type="text" name="age"></div> 
    <div id="right6" style="float:left;width:6%;"> <input name="submit" type="submit"></div> 
</div>

的68％等於860 PXL我的屏幕上。它應該改變，如果它轉到其他屏幕分辨率。我嘗試了68％到100％，另一個div用id = right = style =「position：fixed ...」，但它只是搞砸了，並把所有東西都放在左側。

來源

2013-08-04 Ace Caserya

不同的元素不能有相同的id。改爲使用班級。對於這些類型的內容，使用內聯風格是不鼓勵的。 'width：150'是一種無效的風格，因爲它會丟失一個單位（px，em，％）。某些瀏覽器可能會將它「更正」爲px，而其他瀏覽器可能會忽略它。 – Sumurai8

謝謝，我會糾正我的問題 –

解決這個問題的最簡單的方法，就是使用display: table和display: table-cell，樣式的div作爲一個表，而不使用實際的表：

Example on jsbin。見display on mdn。使用CSS

CSS版本

<div class="parent"> 
    <div class="left">ASDF</div> 
    <div class="right">asdf</div> 
    <div class="right">asdf</div> 
    <div class="right">asdf</div> 
</div>

：

我將添加兩個CSS版本和，氣餒，內嵌式的版本，這個帖子

.parent { 
    display: table; 
    width: 100%; 
} 

.left { 
    width: auto; 
    border: 1px dotted blue; 
    display: table-cell; 
} 

.right { 
    display: table-cell; 
    width: 50px; 
    border: 1px dotted green; 
}

直插式版本

<div style="display: table; width: 100%;"> 
    <div style="display: table-cell;">ASDF</div> 
    <div style="display: table-cell; width: 150px;">asdf</div> 
    <div style="display: table-cell; width: 150px;">asdf</div> 
    <div style="display: table-cell; width: 150px;">asdf</div> 
</div>

來源

2013-08-04 06:29:23 Sumurai8

好吧，明白了，謝謝。 –

如何讓一個div可以調整，而其他成功的列固定？

回答

相關問題