Как мне подогнать набор полей под размер его содержимого с помощью CSS? - PullRequest
Новая
       15

Как мне подогнать набор полей под размер его содержимого с помощью CSS?

1 голос
/ 13 октября 2011

У меня есть набор полей с некоторым содержимым, и содержимое перемещается относительно своей первоначальной позиции. Смотрите это jsFiddle .

Мне было приятно, когда я попал в Stack Overflow и искал свою проблему: я думал, этот вопрос был ответом. Однако этот вопрос касается только ширины (чтобы уменьшить ширину набора полей до размера содержимого, изменить отображение на встроенное или что-то подобное).

Как уменьшить набор полей до размера содержимого? А именно, я хочу, чтобы высота набора полей уменьшалась при перемещении содержимого набора полей вверх.

Ответы [ 3 ]

6 голосов
/ 13 октября 2011

Может быть, вы могли бы добавить display:inline-block; к CSS набора полей, например. в вашем примере: 

fieldset{
    border: solid 2px blue;
    display:inline-block;  
}

Достигает ли это того, что вы имеете в виду? Хотя старый браузер должен придерживаться display:inline;.

Редактировать: хорошо, с новой скрипкой я вижу, чего вы хотите достичь. Я думаю, что вы должны использовать javascript для регулировки высоты в этом случае - если это подходит для вас.

Вот пример: 

window.addEvent('domready', function() {
    $('myfieldset').setStyle('height', $('myfieldset').getStyle('height').toInt() - 20);
});

Просто добавьте id="myfieldset" к вашему набору полей, чтобы он работал в вашем примере.

Ссылка на это решение: http://jsfiddle.net/rMrLe/

2 голосов
/ 13 октября 2011

Вы можете сделать это inline-block: http://jsfiddle.net/XDMfN/49/

Или inline (для IE): http://jsfiddle.net/XDMfN/50/

0 голосов
/ 13 октября 2011

Это невозможно, потому что position: relative заставляет элемент нормально отображаться, а затем сдвигаться, поэтому fieldset "думает", что элемент находится в нормальном состоянии.

Единственный реальный способ исправить это динамически - это использовать Javascript, как показано в этом jsFiddle , который использует jQuery для изменения свойства height css.

...