Контейнер CSS не растягивается для размещения плавающих элементов - PullRequest
Новая
       9

Контейнер CSS не растягивается для размещения плавающих элементов

20 голосов
/ 07 января 2010 
<html>

<head>

<style type="text/css">

  .container {
      width: 900px;
      border: 2px solid #333333;
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .container_left {
      border: 2px solid #FF00FF;
      width: 650px;
      float: left;
  }

  .container_right {
      border: 2px solid #0000FF;
      width: 225px;
      float: right;
  }

</style>
</head>

<body>

    <div class="container">
        <div class="container_left">
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        </div>

        <div class="container_right">
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        </div>
    </div>

</body>
</html>

Результат:
result

Я хочу такой результат:
desired result

Ответы [ 7 ]

36 голосов
/ 07 января 2010

Добавьте overflow: hidden; к селектору .container. Это заставит контейнер признать, что у него есть дочерние элементы.

24 голосов
/ 07 января 2010

Дайте контейнеру 

overflow: auto

или 

overflow: hidden

см. на этой странице quirksmode.org для получения подробной информации по этому вопросу.

11 голосов
/ 07 января 2010

A быстрое исправление - добавление overflow: hidden к вашему .container.

Это не лучшее решение , скажем так, просто самое быстрое решение . Лучшим решением было бы внедрить и применить clearfix , поскольку у него нет проблем с печатью из-за переполнения.

Если вы используете overflow: auto или overflow: hidden и пользователь пытается распечатать страницу, содержимое, которое не помещается на распечатанной странице, будет обрезано, потому что:

  1. полосы прокрутки не печатаются
  2. скрытый контент не отображается
5 голосов
/ 07 января 2010

Один из вариантов - вставить <div style="clear: both;"></div> непосредственно перед закрытием контейнера. 

<div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

    <div style="clear: both;"></div>

</div>
1 голос
/ 07 января 2010
1 голос
/ 07 января 2010 
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

Применить .clear к вашему родительскому элементу.

1 голос
/ 07 января 2010

к внешнему div, вы можете использовать clearfix css, объясненный здесь: http://www.positioniseverything.net/easyclearing.html

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

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

...