Вопросы Теги

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

<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

20
задан Cœur 17 June 2017 в 09:13
поделиться

7 ответов

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

.
37
ответ дан 29 November 2019 в 22:33
поделиться

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

overflow: auto

или 

overflow: hidden

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

.
24
ответ дан 29 November 2019 в 22:33
поделиться 
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

Применяйте .clear к родительскому элементу.

1
ответ дан 29 November 2019 в 22:33
поделиться

Это может быть полезно "Очистка плавающего контейнера"

1
ответ дан 29 November 2019 в 22:33
поделиться

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

1
ответ дан 29 November 2019 в 22:33
поделиться

Одна из опций заключается в том, чтобы вставить

непосредственно перед закрытием контейнера 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>
5
ответ дан 29 November 2019 в 22:33
поделиться

A Quick Fix - это добавить Переполнение: Hidden к вашему .Container .

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

В случае использования события Overflow: AUTO или Overflow: Hidden и пользовательские попытки печатать страницу, содержимое, которое не подходит на печатной странице, будет обрезана, потому что:

  1. Свитки-бары не печатают
  2. Скрытый контент не отображается
11
ответ дан 29 November 2019 в 22:33
поделиться