Какое свойство CSS лучше всего использовать в этой ситуации?

Question

Представьте, что у меня есть 3 строки текста, например, как показано ниже:

Строка 1: это текст 1

Строка 2: это текст 2

Строка 3: это текст 3

Теперь я хочу скрыть строку 2, но я хочу, чтобы строка 3 переместилась вверх в ту же позицию, что и строка 2, когда строка 2 станет видимой, тогда я хочу, чтобы строка 2 прорезалась прямо туда, где она была, и Строка 3, чтобы вернуться в исходное положение.

Итак, я хочу знать, какое свойство css лучше всего использовать для этого, потому что я пробовал visibility:hidden и display:none, и хотя они оба работают, когда дело доходит до сокрытия строки 2 и повторного появления строки 2, они оба не позволяют строке 3 двигаться вверх автоматически, когда строка 2 невидима, поэтому в середине остается большой промежуток, который делает внешний вид немного небрежным.

Спасибо

Answer 1

display: none; в строке 2 должно автоматически перемещаться вверх по строке 3 и ниже, так как это не сохранит место. У вас есть другая проблема с вашим позиционированием; Хорошая ставка - абсолютное позиционирование, заявленное @ JCOC611.

См. Fiddle: http://jsfiddle.net/NFsN6/2/, где span скрыт каждым методом и, таким образом, p-контейнер больше не имеет видимого содержимого, но демонстрирует 2 разных поведения (u) rs. 0 высот в случае display: none; и все тот же внешний вид, но пустой в случае visibility: hidden;

Не могли бы вы опубликовать код, который воспроизводит вашу проблему?

Answer 2

Похоже, вы ответили на свой вопрос ... visibility:hidden сохранит место в макете для элемента, а display:none - нет, поэтому мне кажется, что вы хотите использовать display, если только вы не хотитеманипулировать высотой самого элемента для получения эффекта.