Столбцы переполняют основной элемент div

Question

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

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

Пожалуйста, смотритепример моей работы здесь

1. Почему это происходит?(редактировать) - Понятно

2. Как получить, чтобы столбцы находились внутри элемента содержимого и учитывали поток документа?(редактировать) - решено

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

Answer 1

1. Содержимое будет переполнено его ограничительной рамкой, если в некоторых случаях вы не используете overflow: hidden (или подобное); см. переполнение и ограничение в спецификации CSS2

2. Поскольку вы перемещаете три столбца, вам необходимо использовать что-то вроде Clearfix , чтобы содержимое, которое следует за контейнером столбцов, очищалось за ними. (В качестве альтернативы вы можете установить clear: both на <p>, содержащем содержимое нижнего колонтитула.)

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

Answer 2

Попробуйте добавить переполнение: скрытый для вашего содержимого div и снять ограничение по высоте, как показано ниже:

#content
{
    background-color:Blue;

    width:800px;
overflow:hidden;

Answer 3

Вы перемещаете эти столбцы и не очищаете их, поэтому происходит то, что эти 3 элемента «плавают» над всем остальным, поэтому браузер не включает их в основной html.Вы должны очистить float с помощью значения CSS clear.

См. JsFiddle здесь

Также ознакомьтесь с этим учебником