Выровняйте элементы div рядом и друг под другом

Я хочу выровнять 4 div-бокса, чтобы они находились в макете 2x2, подобном этому

1 2
3 4

Мой код выглядит следующим образом

<div style="width:300px;height:300px;float:left;">    DIV 1    </div>

<div style="width:300px;height:300px;float:left;">    DIV 2    </div>

<div style="width:300px;height:300px;clear:left;">    DIV 3    </div>

<div style="width:300px;height:300px;float:left;">    DIV 4    </div>

который создает следующий макет:

1 2
3
4

Может кто-нибудь мне помочь?

Ответы

Ответ 1

Дайте все из них float: left, затем оберните их в контейнер, достаточно широкий, чтобы соответствовать 2 из них, так что остальные два будут нажаты. Например,

<div id="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

CSS

#container {
  width: 600px;
}

#container div {
  float: left;
  height: 300px;
  width: 300px;
}

Изменить: Если вам нужно больше div внутри тех, которые у вас уже есть, вы всегда можете применить к ним такую же технику, как

<div id="container">
  <div>
    <div>Inner Div 1</div>
    <div>Inner Div 2</div>
    <div>Inner Div 3</div>
    <div>Inner Div 4</div>
  </div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

Затем с помощью CSS используйте этот дополнительный стиль:

#container div div {
  float: left;
  height: 150px;
  width: 150px;
}

Ответ 2

замените <div style="width:300px;height:300px;clear:left;"> на Div 3 на <div style="width:300px;height:300px; clear:both; float:left">

полный html

<div style="width:300px;height:300px;float:left;">
    DIV 1
</div>

<div style="width:300px;height:300px;float:left;">
    DIV 2
</div>

<div style="width:300px;height:300px; clear:both; float:left">
   DIV 3
</div>

<div style="width:300px;height:300px;float:left;">
   DIV 4
</div>

Ответ 3

Вы можете достичь этого, используя это:

<body style="width:600px; height:600px;">
<div id="container">
    <div style="width:50%; height:50%;float:left;">
    DIV 1
</div>

    <div style="width:50%; height:50%;float:left;">
    DIV 2
</div>

    <div style="width:50%; height:50%; float:left;">
    DIV 3
</div>
    <div style="width:50%; height:50%;float:left;">
    DIV 4
</div>

</div>
</body>

Очевидно, помещая информацию стиля в файл CSS, а не в HTML.

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