ti-enxame.com

Alinhar elementos div um ao lado do outro

eu quero alinhar 4 div boxes para que eles estejam em um layout 2x2 como este

1 2
3 4

Meu código fica assim

<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>

que produz o seguinte layout:

1 2
3
4

Alguém poderia me ajudar com isso?

17
Tim

Dê a todos eles float: left, envolva-os em um recipiente suficientemente largo para acomodar 2 deles, de modo que os outros dois sejam empurrados para baixo. Por exemplo,

<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;
}

Edit: Se você quiser mais divs dentro dos que você já possui, sempre poderá aplicar a mesma técnica às crianças, como

<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>

Em seguida, com CSS, use este estilo adicional:

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

substituir <div style="width:300px;height:300px;clear:left;"> de Div com <div style="width:300px;height:300px; clear:both; float:left">

html completo

<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>
13
ArK

Você pode conseguir usando este:

<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>

Obviamente, colocando as informações de estilo em um arquivo CSS, e não no HTML.

Eu tentaria evitar definir a largura e altura para um tamanho específico, a menos que você simplesmente não possa evitá-lo. Isso causa muitos problemas quando visualizados em diferentes navegadores em diferentes resoluções.

1
codingbadger