0

最初の入力の幅を100％にし、2番目の+ image = 100％にして、2番目の入力が同じ行の残りのスペース（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>

4

4 に答える 4

1

はい、これは CSS で行うことができます。ここdisplay: tableでdisplay: table-cell、 wherewidth: 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;
}

キャプション列が必要以上のスペースを取りたくない場合は、table-layout:fixed;andwidth: 35%;から.tand を削除することもできます.caption

于 2015-03-10T22:25:58.370 に答える
0

テストされていません。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-18T05:16:33.483 に答える
0

テーブルでできることがわかりました。質問はまだ残っています.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-18T05:39:54.060 に答える
0

それでも興味があれば、可能ですが、少し魔法を使う必要があります..

絶対配置を使用すると、これらの入力フィールドを好きなだけ広げることができます。または、入力フィールドは頑固なものであり、それ以外の動作をしないため、それらを 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>

PS簡単にするために、エンティティのスタイル定義を残しました。現実のケースでは、もちろん、それらを .css ファイルに移動します。

于 2010-02-03T00:11:05.227 に答える