如何使第二個元素獲得水平空間的其餘部分

我想使第一個輸入的寬度爲100％，第二個+圖像= 100％，以便第二個輸入獲取剩餘空間（100％-img大小）同一條線。是否有可能使用CSS？如何使第二個元素獲得水平空間的其餘部分

 
<html><head><title>width test</title> 
<style type="text/css"> 
.t { 
    width: 100%; 
    table-layout:fixed;
 
} 
.caption { 
    text-align: left; 
    width: 35%; 
} 
.data { 
    text-align: left; 
    width: 65%; 
} 
.edt { 
    width: 100%; 
} 
</style> 
</head> 
<body> 
<table class="t"> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td class="data"><input type="text" class="edt" /></td> 
    </tr> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td class="data"> 
      <input type="text" class="edt" /><a href="#"><img width="22px" src="cal.png" /></a> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

來源

2009-07-18 Artem

我發現我可以用表格做。問題仍然存在，是否可以使用div/css？

 
<html><head><title>width test</title> 
<style type="text/css"> 
.t { 
    width: 100%; 
    table-layout:fixed;
 
} 
.caption { 
    text-align: left; 
    width: 35%; 
} 
.data { 
    text-align: left; 
    width: 65%; 
} 
.edt { 
    width: 100%; 
} 
.joiningtable 
{ 
    border-spacing:0px; 
    border-collapse:collapse; 
    width:100%; 
    margin:0px; 
    border:0px; 
    padding:0px; 
} 
.joiningrest 
{ 
    width:100%; 
    margin:0px; 
    border:0px; 
    padding:0px; 
} 
.joiningfixed 
{ 
    margin:0px; 
    border:0px; 
    padding:0px; 
} 
</style> 
</head> 
<body> 
<table class="t"> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td class="data"><input type="text" class="edt" /></td> 
    </tr> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td class="data"> 
      <table class="joiningtable"> 
       <tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><a href="#"><img src="cal.png" /></a></td><tr> 
      <table> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

來源

2009-07-18 05:39:54 Artem

未經測試。你沒有提到colspans不能使用，所以這個解決方案使用它。

<table class="t"> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td class="data"><input type="text" class="edt" /></td> 
    </tr> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td colspan="3"><input type="text" class="edt" /></td> 
     <td class="data"><a href="#"><img width="22px" src="cal.png" /></a> 
     </td> 
    </tr> 
</table>

來源

2009-07-18 05:16:33 sqram

不幸地我這個外部表結構是固定取出table-layout:fixed;和width: 35%;，所以我不能這樣做（ – Artem 2009-07-18 05:39:43

如果你仍然有興趣，這是可能的，但你需要使用一個小魔術..

絕對定位，可以舒展這些輸入字段一樣寬，你喜歡的，或者相反，你可以將它們拉伸到100％，然後將它們放在寬度範圍內，因爲輸入字段是固定的東西，不會有其他行爲。

<html> 
<body> 
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;"> 
<span style="position:absolute; left:10px; top:10px;">Caption</span> 
<span style="position:absolute; left:10px; top:40px;">Caption</span> 
<span style="position:absolute; left:70px; top:10px; right:10px;"> 
<input type="text" style="width:100%" /> 
</span> 
<span style="position:absolute; left:70px; top:40px; right:40px;"> 
<input type="text" style="width:100%" /> 
</span> 
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" /> 
</div> 
<div> 
</div> 

</body> 
</html>

P.S.爲了簡單起見，我已將樣式定義留在了實體上。在現實世界的情況下，我會把它們移到一個.css文件當然。

來源

2010-02-03 00:11:05 GenericMeatUnit

是的，這可以用CSS來完成。訣竅是使用display: table和display: table-cell，其中width: 100%表示「剩餘的可用空間」。

下面是一個例子（帶包裝的div周圍.edt和圖片鏈接，效果更佳）：http://jsfiddle.net/zgw8q7vj/

重要的CSS的部分是這些：

/*Use "table" layout in the 'data' cells, 
    and give them all the available width (after the captions)*/ 
.data { 
    display: table; 
    width: 100%; 
} 
/*Then give the textbox all the available remaining width...*/ 
.edt-wrapper { 
    display: table-cell; 
    width: 100%; 
} 
/*...after the image has claimed the space it needs*/ 
.img-wrapper { 
    display: table-cell; 
}

如果你不想標題列時採取更多的空間比它需要，你甚至可以從.t和.caption

來源

2015-03-10 22:25:58 Sphinxxx

謝謝@Sphinxxx它將使用哪些瀏覽器？它會在IE6中工作嗎？ – Artem 2015-03-11 15:53:46

我不知道，但是從IE11的「模擬模式」測試後，它只能在IE8和更新版本上運行。 – Sphinxxx 2015-03-11 17:08:41

如何使第二個元素獲得水平空間的其餘部分

回答

相關問題