如何使第二个元素获得剩余的水平空间
我想让第一个输入的宽度为 100%，第二个 + image = 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>
I want to make first input have the width 100% and second + image = 100% so that second input get the rest of the space (100%-img size) on the same line. Is it possible to do using 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
是的，这可以通过 CSS 来完成。 诀窍是使用
display: table和display: table-cell，其中width: 100%表示“剩余的可用空间” ”。这是一个示例（在
.edt周围使用包装器 div 和图像链接以获得更好的结果）： http ://jsfiddle.net/zgw8q7vj/重要的 CSS 部分如下：
如果您不希望标题列占用超出其需要的空间，您甚至可以删除
table-layout:fixed;和width: 35%;来自.t和.captionYes, this can be done with CSS. The trick is to use
display: tableanddisplay: table-cell, where wherewidth: 100%means "the rest of the available space".Here is an example (with wrapper divs around
.edtand the image link for better result): http://jsfiddle.net/zgw8q7vj/The important CSS parts are these:
If you don't want the caption column to take more space than it needs, you can even remove
table-layout:fixed;andwidth: 35%;from.tand.caption未经测试。
你没有提到不能使用 colspans，所以这个解决方案使用它。
untested.
you didn't mention colspans can't be used, so this solution uses it.
我发现我可以用桌子做到这一点。 问题仍然存在，是否可以用 div/css 来做？
<代码>
I have found that I can do it with tables. The question still remain, is it possible to do with 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>
如果您仍然感兴趣，这是可能的，但您需要使用一点魔法。
通过绝对定位，您可以将这些输入字段拉伸到您喜欢的宽度，或者更确切地说，您可以将它们拉伸到 100% 并将它们放入内部跨度可以延伸到您想要的范围，因为输入字段是顽固的东西，不会以其他方式表现。
PS 为了简单起见，我将样式定义保留在实体上。 在实际情况下，我当然会将它们移动到 .css 文件中。
If you're still interested, it is possible but you need to use a little magic..
With absolute positioning, you can stretch those entry fields as wide as you like, or rather, you make them stretch to 100% and put them inside spans that stretch as wide as you like because input fields are stubborn things and won't behave otherwise.
P.S. I've left the style definitions on the entities for simplicity. In a real-world case, I'd move them to a .css file of course.