Я хочу, чтобы первый вход имел ширину 100%, а второй + изображение = 100%, чтобы второй вход получил остальную часть пространства (100% -img size) в той же строке. Можно ли использовать 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>

0
Artem 18 Июл 2009 в 07:59

4 ответа

Лучший ответ

Я обнаружил, что могу делать это с помощью таблиц. Остается вопрос, можно ли делать с 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>

0
Artem 18 Июл 2009 в 05:39

Если вам все еще интересно, это возможно, но вам нужно использовать немного магии.

С помощью абсолютного позиционирования вы можете растянуть эти поля ввода настолько широко, насколько захотите, или, скорее, вы заставляете их растягиваться до 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.

0
GenericMeatUnit 3 Фев 2010 в 00:11

Непроверенный. вы не упомянули, что 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>
0
sqram 18 Июл 2009 в 05:16

Да, это можно сделать с помощью CSS. Хитрость заключается в использовании display: table и display: table-cell, где width: 100% означает «остальное доступное пространство».

Вот пример (с разделами обертки вокруг .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

1
Sphinxxx 10 Мар 2015 в 22:25