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

StackOverflow https://stackoverflow.com/questions/1025048

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

Создание макета с двумя столбцами в 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>

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

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

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

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

Если у вас все в порядке с установкой определенной ширины в ваших 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) делает так, чтобы все, что вы помещаете после столбцов, оставалось ниже столбцов. Таким образом, вы можете изменить ширину одного столбца, не вмешиваясь в стилизацию другого. 

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top