Граница вокруг искусственных столбцов HTML - PullRequest
Новая
       2

Граница вокруг искусственных столбцов HTML

0 голосов
/ 28 марта 2011

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

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

Код: 

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>StackOvervlow</title>
    <style type="text/css" media="screen">
      body {
        width: 900px;
      }
      #wrapper {
        border: 2px solid gray;
      }
      #container {
        width: 600px;
        float: left;
        background-color:#678;
      }
      #sidebar {
        width: 200px;
        float: right;
        background-color: bisque;
      }
      #footer {
        clear: both;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="header"></div>
    <div id="wrapper">
      <div id="container">
        <p>Placeholder Text.</p>
        <p>Placeholder Text.</p>
      </div>
      <div id="sidebar">
        <p>Placeholder Text.</p>
      </div>
    </div>
    <div id="footer">
      <p>Some footer stuffs</p>
    </div>
  </body>
</html>

Результат ...

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

Спасибо.

Ответы [ 2 ]

1 голос
/ 28 марта 2011

Просто добавьте: 

overflow: hidden;

в CSS для #wrapper, демонстрация по адресу: JS Fiddle .

Причина, по которой граница сворачивается в линию, заключается в том, что всплывающие элементы удаляются из потока документа, что означает, что они по существу не занимают места в своем родительском элементе, который, без содержимого, сворачивается. overflow: hidden; заставляет родительский элемент обернуть его дочерние элементы. Хотя, если честно, я не особо понимаю, , почему это происходит.

Стоит прочитать CSS Floats 101, в A List Apart для повышения квалификации / учебника по CSS-плавающим объектам, однако, для указателей на их поведение.

0 голосов
/ 28 марта 2011

Когда вы перемещаете элемент, он не занимает место так же, как когда он встроен.

Решение состоит в том, чтобы поместить элемент уровня блока, который имеет оба атрибута clear внизу:

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

Подробнее см. Здесь: http://jsfiddle.net/billymoon/eDqg5/

...