Как разместить много DIV в CSS

Question

Я прошел длинный урок по W3Schooles, чтобы выучить CSS; Я изучил некоторые основы, но все еще не достиг своей основной цели: позиционирование DIVs

Это то, что я пытаюсь сделать

*---------*---------*
*         *         *
*         *         *
*---------*---------*

Моя цель проста и тривиальна для некоторых, но у меня возникают головные боли при этом правильным способом , на самом деле я сделал это, но у меня много проблем, когда я добавляю больше текста в DIV или они просто сливаются с другими DIV

Я просто поиграл со значениями полей и отступов, используя FireBug. Все, что мне сейчас нужно, это научить меня этому простому (я надеюсь) трюку, чего мне не хватает: как работает это простое позиционирование? Должен ли я использовать абсолютное, относительное позиционирование? Измените поля, отступы, размер ??

Если у вас есть хороший учебник, объясняющий этот момент, пожалуйста, укажите его. У меня были другие головные боли, ищущие это в Google.

Answer 1

Похоже, вы пытаетесь плавать две колонки рядом друг с другом. Это довольно просто и подробно описано здесь:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Я стараюсь держаться подальше от свойства position , если только мне не придется накладывать некоторые элементы.

Answer 2

Создание макета с двумя столбцами в CSS

Лично мне не нравится использовать clear: оба на теге br.

Используйте переполнение: авто в родительском div вместо

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

Мне повезло, эмулируя код, найденный в сетке 960 .

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

Answer 4

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>

Answer 5

Если у вас все в порядке с настройкой определенной ширины в ваших div, мне хорошо подойдет следующее:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

"float: left" заставляет столбцы располагаться рядом. Последний div (с clear: both) делает так, чтобы все, что вы помещаете после столбцов, оставалось ниже столбцов. Таким образом, вы можете изменить ширину одного столбца, не вмешиваясь в стилизацию другого.

Answer 6

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

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