Question

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

Answer 1

是的，这可以通过CSS完成。诀窍是使用display: table和display: table-cell，其中width: 100%表示＆＃34;其余可用空间＆＃34;。

以下是一个示例（包装器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;
}

如果您不希望标题列占用的空间超出所需空间，您甚至可以从table-layout:fixed;和width: 35%; <删除.t和.caption / p>

Answer 2

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

Answer 3

我发现我可以用桌子来做。问题仍然存在，是否可以使用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>

Answer 4

如果你仍然感兴趣，那么你可能需要使用一点魔法......

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

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

4 个答案: