Когда вы показываете и скрываете div, будет ли он автоматически корректировать окружающие элементы?

Question

Когда вы показываете и скрываете div, он будет автоматически корректировать окружающие элементы?

В некотором роде, как Google Maps http://maps.google.com/maps?hl=en&tab=wl имеет этот маленький значок, где вы можете показать / скрыть левую панель.

Это просто делает его видимым с анимационным эффектом или более сложным?

Answer 1

С точки зрения перенастройки, если вы используете CSS, то это зависит от погоды, или вы не используете отображение: ни один параметр или видимость: скрытый тег.

Visibility будет скрывать, но не влиять на окружающие элементы, display с другой стороны будет ...

Проверьте этот бит кода, который должен выделить это ...

<div style="border: solid 2px black;">
    <div style="visibility: hidden;">
        Hello
        <br />    
    </div>
</div>

<br />

<div style="border: solid 2px black;">
    <div style="display: none;">
        Hello
        <br />    
    </div>
</div>

Надеюсь, это поможет! :)

Answer 2

Любые элементы, которые взяты в / из нормального потока (позиционирование по умолчанию), заставят остальную часть страницы соответствующим образом перенастроиться. Однако есть способы удалить элементы из нормального потока.

position: absolute или position: relative удалит элемент из нормального потока. Используя их, другие элементы будут вести себя так, как будто позиционируемых элементов нет (если только они не используют правила позиционирования).

Чтобы скрыть / показать div:

display: none
удалит элемент из нормального потока

visibility: hidden
скрывает элемент, но сохраняет его размеры в нормальном потоке

Answer 3

Зависит от относительного или абсолютного положения. А в примере с Google это более сложно, но не так сложно, элементы управления справа от панели перемещаются после завершения анимации.