Позиционирование Div с дочерним элементом

#css

Вопрос:

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

вот код.

 <div id="wrapper">  
     <div id="first" style="top:10px; width:400px; border-style:solid;border-width:1px;">   
        A quick brown fox jumps over the lazy dog..................
</div>

<div id="second" style="top:100px;width:400px; border-style:solid; border-width:1px;">
     <div id="child1" style="margin-left:250px">
            21st, October 2011
     </div>
  </div>
<div>

Ответ №1:

Используйте display:none вместо visibility:hidden

Ответ №2:

CSS visibility: hidden; только скроет элемент, он все равно зарезервирует для него место в потоке документов.

То, что вы хотите display: none; , это то, что полностью удалит элемент.

Пример, закодированный здесь. (щелкните #second div для активации.

1. понял, но моя главная проблема заключается в том, что если я определяю верхнюю позицию первого div, я хочу, чтобы вторая отображалась под первой, не упоминая верхнюю, и когда я устанавливаю значение display none в значение first, вторая занимает точное положение первого, включая дочерние элементы second. Можете ли вы дать мне код, чтобы я мог проверить в fiddler.

Ответ №3:

Если вы сделаете что-то вроде этого:

 <div id="wrapper" style="width:400px;">  
     <div id="first" style="display:none;top:10px; border-style:solid;border-width:1px;">   
        A quick brown fox jumps over the lazy dog..................
    </div>
     <div id="second" style="border-style:solid; border-width:1px;">
         <div id="child1" style="margin-left:250px">
                    21st, October 2011
         </div>
     </div>
</div>

если поместить wrapper оба объекта вокруг, то второй div переместится на позицию первого div , если первый div скрыт.

1. спасибо, Исаак и Кайл .. жаль, что я не выбрал оба ответа 🙂

2. Прохладный. Эй, забудьте top значение, используйте margin-top , если хотите, чтобы там был пробел. Вам не нужно возиться с абсолютным позиционированием в таком простом случае, как этот.