div сворачивается вокруг заголовка - PullRequest
Новая
       4

div сворачивается вокруг заголовка

6 голосов
/ 02 марта 2009

У меня есть несколько вложенных div: 

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>
  • стиль оболочки: width: 780px; margin: 20px auto; border: solid black 5px;
  • стиль заголовка: position: relative; min-height: 125px;
  • тип кузова: position: relative;
  • Стиль контента: position: absolute; left: 50px; top: 0px;

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

EDIT

Если я удаляю div содержимого (и помещаю html-элементы непосредственно в тело), ​​div тела перестает разрушаться! Попытка понять почему - угадайте, что это из-за позиции: абсолютное содержание div.

Любая подсказка, почему это происходит и как решить?

Я посмотрел на этот вопрос , но мне кажется, что он не работает (или, возможно, я очищаюсь в неправильном месте ...).

Ответы [ 8 ]

2 голосов
/ 02 марта 2009

В этом случае вам не нужно использовать абсолютное или относительное позиционирование.

Следующее достигает того, что вам нужно, с минимальным количеством споров CSS.
Цвета, потому что я люблю цвет, и вы тоже должны! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
        <style type="text/css" media="screen">
    #wrapper { 
        width: 780px; 
        margin: 20px auto; 
        border: solid black 5px;

    }
    #header { 
        min-height: 125px; 
        overflow:hidden;

    }
    #body { 
        background-color:red; 

    }
    #content { 
        margin-left: 50px;
        margin-top: 0px;
        background-color:pink; 

     }
.floatie { float:left; width:40px; height :40px; 
    margin:5px; background-color:#fe0;}

        </style>


    </head>
    <body>



        <div id="wrapper">
          <div id="header">
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
          </div>

          <div id="body">
            <div id="content">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                    sed do eiusmod tempor incididunt ut labore et dolore 
                    magna aliqua. Ut enim ad minim veniam, quis nostrud 
                    exercitation ullamco laboris nisi ut aliquip ex ea 
                    commodo consequat. Duis aute irure dolor in 
                    reprehenderit in voluptate velit esse cillum dolore eu 
                    fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia 
                    deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>

    </body>
</html>
2 голосов
/ 02 марта 2009

Попробуй это. Примечание: переполнение, скрытое в div заголовка, решает необходимость очистки div. Обратите внимание, почему вы используете относительное + абсолютное позиционирование для контента. Это лучше обрабатывать с полями imho. 

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
    #header { overflow: hidden; background-color: yellow; }
    #header div { float: right; border: 2px solid red; }
    #body { position: relative; }
    #content { position: absolute; left: 50px; top: 0px;  }
  </style>
</head>
<body>
    <div id="wrapper">
      <div id="header">
        <div>One</div>
      <div>Two</div>
      <div>Three</div>
      </div>
      <div id="body">
        <div id="content">
          <p>This is some text</p>
        </div>
      </div>
    </div>
</body>
</html>
1 голос
/ 02 марта 2009

Если вы хотите, чтобы #content отображался в границах #wrapper, попробуйте этот своп для размера после того, как вы удалите position:relative из #body (или полностью удалите этот DIV): 

#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}

Таким образом, вы сможете увидеть #content в оболочке, но под заголовком #.

Может быть, потому что на самом деле нет ничего, что могло бы выпасть из-под #content. #header, когда он был установлен на относительный, вид исчезает для нижеследующего, даже если для #body было установлено абсолютное значение, а для его потомков - относительное.

Изменение значения #content с position:absolute на position:relative приведет к тому, что оно перейдет под предыдущий DIV, который в данном случае был # header.

1 голос
/ 02 марта 2009

Я использую этот стиль для очистки элементов: 

.Clear { clear: both; height: 0; overflow: hidden; }

Поместите очищающий div в заголовок, чтобы задать размер элемента заголовка: 

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
    <div class="Clear"></div>
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

Установка высоты очищающего элемента на ноль заставляет его не занимать места самостоятельно. Стиль переполнения таков, что IE не даст ему высоту, даже если высота установлена ​​на ноль. В IE странная идея, что каждый элемент должен иметь длину не менее одного символа, устанавливая переполнение: скрытый; сохраняет высоту равной нулю, хотя содержание элемента в IE составляет один символ.

0 голосов
/ 02 марта 2009

Я не фанат использования "clear: both", если это не совсем необходимо. Лучшее решение - установить для свойства «переполнение» сворачивающегося DIV значение «auto».

Попробуйте что-то вроде: 

#header { float: left; overflow: auto; }
0 голосов
/ 02 марта 2009

Если вы хотите что-то очистить, вам также нужно плавать в этом элементе, чтобы он работал правильно. Так вам и понадобится. 

#header { clear: both; float: left; }
#body { clear: both; float: left; }
0 голосов
/ 02 марта 2009

Добавьте стиль "clear: both" к вашему div с идентификатором "body". Вы также можете добавить div с этим стилем сразу после «связки плавающих div» и перед закрытием тега заголовка div.

0 голосов
/ 02 марта 2009

Попробуйте очистить после ваших плавающих элементов в заголовке. 

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
    <div style="clear:both;"></div> <!-- Or use a clearfix... -->
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...