輸入元素來填充其容器的剩餘寬度

經常詢問這個問題，但迄今爲止，這些解決方案都沒有幫助我們。 form的寬度設置爲100％，holder的相對寬度爲10％，現在我想填充所有「空閒」寬度input_edit。有人能幫我嗎？謝謝！！輸入元素來填充其容器的剩餘寬度

這裏是我的HTML

<form> 
    <textarea rows="4" name="in" class="input_edit"> </textarea> 
    <div id="holder"></div> 
</form>

我的CSS

form { 
width: 100%; 
overflow: hidden; 
} 
.input_edit { 

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box; 

width: auto; 

background-color: transparent; 
box-shadow: inset 0 0 5px rgba(0,0,0,0.4); 
border: 5px solid #666; 
margin: 5px; 
border-radius: 5px; 
height: 60px; 

float: left; 

} 
#holder { 
border: 5px dashed #666; 
border-radius: 5px; 

margin: 5px; 
width: 10%; 
height: 60px; 
float: right; 
}

編輯：

holder是10％，現在，但我希望它被隱藏例如在移動設備上，所以我不能使用100-10 = 90％，問題是box-sizing

來源

2013-02-03 bluewhile

100％ - 10％= ??? – j08691

@ j08691'.input_edit'具有像素邊距和邊框，這使得它更加困難。 – Hope4You

它仍然認爲你只需要考慮差異。 – j08691

該CSS3 width: calc(90% - 30px);將工作 - 但支持它的瀏覽器數量是相當有限的。

下一個最佳解決方案可能是使用jQuery（或JavaScript）手動計算正確的寬度。例如：

$(".input_edit").width($("form").width() - $("#holder").width() - 40);

然後更新它，只要form的寬度發生變化。

來源

2013-02-03 00:40:45 Lrdwhyt

註冊CSS3解決方案。它在當前的瀏覽器中得到很好的支持。對於任何新項目，使用CSS解決方案比JavaScript選項好得多。 – samael

您將不得不刪除.input_edit和#holder上的邊距，並應用框尺寸：border-框;到那些元素。

邊框將填充和邊框放置在90％，而不是邊距。爲了更好地瞭解如何製作排水溝，我建議你看這個視頻：http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

我很確定這會回答你很多問題。

來源

2013-02-03 00:30:48 belens

http://jsfiddle.net/AVdLS/1/這裏是一個有效的工作版本（雖然沒有利潤率）。 – belens

輸入元素來填充其容器的剩餘寬度

回答

相關問題