Почему отступы этого <DIV>не соблюдаются (внизу)? - PullRequest
Новая
       7

Почему отступы этого <DIV>не соблюдаются (внизу)?

0 голосов
/ 20 сентября 2010

У меня есть дополненный DIV (содержащий другие / sub-DIVs и DL), за которым следует текст: 

<div>    # the padded/main div

  <div>
    <div>
    </div>
  </div>
  <div>
    <dl>
      <dt></dt><dd></dd>
      <dt></dt><dd></dd>
    </dl>
  </div>

</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...

Как получается, что в нижней части основного DIV не появляется отступов?

(Между содержимым основного div и следующим текстом нет пробела).

Спасибо за любую помощь в этом! Том

Ответы [ 5 ]

0 голосов
/ 05 марта 2012

Том, более разумным подходом было бы определить отдельный класс CSS: 

.clearfix {clear:both; display:block;}

Это позволит вам вызвать этот div, если он вам понадобится в других местах по всей странице.Просто замените на, чтобы убедиться, что это изменение продолжается и не сбрасывается при удалении сброса CSS на остальной части страницы / setup

Regards

0 голосов
/ 20 сентября 2010

Спасибо за ваши быстрые подсказки!

Мне наконец удалось отследить проблему: 

<dd></dd>

элемент имеет "float: left;". Это, очевидно, вызвало перемещение следующего текста «влево / вверх».

Мое решение:

Я вставил пустой 

<div></div>

с "ясно: оба;" между элементом dd и следующим текстом.

Если у кого-нибудь есть более элегантное решение, мне все равно будет интересно!

0 голосов
/ 20 сентября 2010

В вашем примере кажется, что вы пытаетесь использовать новую строку, чтобы вызвать пробелы в HTML. Это не будет работать. Как указано в предыдущих ответах, вы должны установить свойство css margin-bottom, чтобы spaec появлялся после загрузки div и начала следующего HTML-элемента

0 голосов
/ 20 сентября 2010

Если вы хотите использовать отступы, а не поля, тогда измените, чтобы добавить способ идентификации внешнего div (я использовал ID): 

   <div id="outerdiv">    # the padded/main div 
        <div> 
            <div> 
            </div> 
        </div> 
        <div> 
            <dl> 
                <dt></dt><dd></dd> 
                <dt></dt><dd></dd> 
            </dl> 
        </div> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...

и добавьте CSS, например: 

#outerdiv
{
    padding-top: 1em;
    padding-bottom: 1em;
}

РЕДАКТИРОВАТЬ: посмотреть работу здесь: http://jsfiddle.net/yvaPG/

0 голосов
/ 20 сентября 2010

Вы путаете отступы с полем. margin - это свойство, которое определяет пространство между основным div и нижним текстом.

...