Как заставить 2-й элемент получить остальную часть горизонтального пространства - PullRequest
Новая
       5

Как заставить 2-й элемент получить остальную часть горизонтального пространства

0 голосов
/ 18 июля 2009

Я хочу, чтобы первый вход имел ширину 100%, а второй + image = 100%, чтобы второй вход получал оставшееся пространство (размер 100%) в той же строке. Можно ли это сделать с помощью CSS?

<html><head><title>width test</title> <style type="text/css"> .t { width: 100%; table-layout:fixed;<br> } .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 ]

1 голос
/ 11 марта 2015

Да, это можно сделать с помощью CSS. Хитрость заключается в том, чтобы использовать display: table и display: table-cell, где width: 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; и width: 35%; из .t и .caption

0 голосов
/ 18 июля 2009

Я обнаружил, что могу делать это с помощью таблиц. Вопрос еще остается, можно ли это сделать с div / css?

<html><head><title>width test</title> <style type="text/css"> .t { width: 100%; table-layout:fixed;<br> } .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 голосов
/ 03 февраля 2010

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

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

тестировалась. вы не упомянули, что 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...