如何使第二个元素获得水平空间的其余部分

我想使第一个输入的宽度为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

如何使第二个元素获得水平空间的其余部分

回答

相关问题