Html 如何让第二个元素获得剩余的水平空间_Html_Css_Layout_Width

Html 如何让第二个元素获得剩余的水平空间

html css layout

Html 如何让第二个元素获得剩余的水平空间,html,css,layout,width,Html,Css,Layout,Width,我想让第一个输入的宽度为100%，第二个+图像=100%，这样第二个输入就可以在同一行上获得剩余的空间（100%-img大小）。可以使用CSS吗宽度测试 t{ 宽度：100%；表布局：固定； } .标题{ 文本对齐：左对齐；宽度：35%； } .数据{ 文本对齐：左对齐；宽度：65%； } .edt{ 宽度：100%； } 标题：标题：未经测试。您没有提到colspans不能使用，所以此解决方案使用它 <table class="t"> <tr>

我想让第一个输入的宽度为100%，第二个+图像=100%，这样第二个输入就可以在同一行上获得剩余的空间（100%-img大小）。可以使用CSS吗


宽度测试
t{
宽度：100%；
表布局：固定；

}
.标题{
文本对齐：左对齐；
宽度：35%；
}
.数据{
文本对齐：左对齐；
宽度：65%；
}
.edt{
宽度：100%；
}
标题：
标题：

未经测试。您没有提到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>


标题：
标题：

我发现我可以用表格来完成。问题仍然存在，是否可以使用div/css


宽度测试
t{
宽度：100%；
表布局：固定；

}
.标题{
文本对齐：左对齐；
宽度：35%；
}
.数据{
文本对齐：左对齐；
宽度：65%；
}
.edt{
宽度：100%；
}
.接合表
{
边界间距：0px；
边界塌陷：塌陷；
宽度：100%；
边际：0px；
边界：0px；
填充：0px；
}
Joiningest先生
{
宽度：100%；
边际：0px；
边界：0px；
填充：0px；
}
.接合固定
{
边际：0px；
边界：0px；
填充：0px；
}
标题：
标题：

如果您仍然感兴趣，这是可能的，但您需要使用一些魔法

使用绝对定位，您可以将这些输入字段拉伸到您喜欢的宽度，或者更确切地说，您可以将它们拉伸到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>


说明文字
说明文字

另外，为了简单起见，我将样式定义保留在实体上。在现实世界中，我当然会将它们移动到.css文件中。

是的，这可以通过css完成。诀窍是使用

display:table

和

display:table cell

，其中

width:100%

表示“剩余的可用空间”

下面是一个示例（使用

.edt

周围的包装div和图像链接以获得更好的结果）：

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;
}

如果您不希望标题列占用的空间超过它所需的空间，您甚至可以删除

表布局：fixed和<代码>宽度：35%来自.t
和.caption
不幸的是，在我的情况下，这个外部表结构是固定的，所以我不能按照你的方式来做（谢谢@Sphinxxx它将在哪些浏览器上工作？它在IE6中工作吗？我不确定，但在从IE11的“仿真模式”测试它之后，它只在IE8和更新版本上工作。
<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>

/*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;
}