4

Boa noite, tenho a seguinte estrutura de divs: 1 | 2 | 3 | 4 | 5 | 6 O que eu preciso fazer é que essa estrutura fique da seguinte forma:

1 | 3 | 5
2 | 4 | 6

Um único detalhe, é que preciso fazer isso somente usando CSS, sem adicionar mais nenhuma div na estrutura. Meu código segue aqui:

http://codepen.io/anon/pen/YPmOma

2 Respostas 2

2

Uma solução é fixar o CSS assim:

.teste{
  width:100px;
  height:100px;
  background-color:red;
  float:left;
  margin-left:10px;
  position: absolute;
}
.teste:nth-child(even){
  margin-top: 120px;
}
.teste:nth-child(4), .teste:nth-child(3){
  left: 120px;
}
.teste:nth-child(6), .teste:nth-child(5){
  left: 230px;
}

Repara que mudei os teus ID's duplicados para classes. Juntei position: absolute à classe, e depois dei regras mais ou menos a cada elemento.

Exemplo: http://codepen.io/anon/pen/yymRMJ

4
  • Ok Sergio, funciona muito bem dessa forma que mostrou, mas e se essas divis forem geradas dinamicamente? Commented 15/04/2015 às 21:17
  • @DanielSwater como assim? deve ser o mesmo... dá uma olhada aqui: jsfiddle.net/m1y8e18b
    – Sergio
    Commented 15/04/2015 às 21:36
  • Então, é que na verdade eu não sei a quantidade de divs entendeu? Ai eu acho que nao daria p aplicar o nth-child Commented 15/04/2015 às 21:41
  • @DanielSwater acho que o nth-child é ótimo para isso. Se me deres um exemplo onde esta ideia não funciona diz, que posso dar uma olhada novamente.
    – Sergio
    Commented 16/04/2015 às 13:01
0

A minha solução, presumindo que você possa setar a propriedade display do elemento pai desses elementos, é usar o display: flex, e setar as propriedades order para definir a ordem dos elementos dentro desta div. É importante definir uma largura máxima para fazer os elementos descerem para a próxima linha, e flex-wrap: wrap serve para fazer os elementos "quebrarem" para a próxima linha quando o limite de uma div é encontrado.

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 30px;
}

.els:nth-child(1) {
color: red;
order: 1
}

.els:nth-child(2) {
  order: 4
}

.els:nth-child(3) {
  order: 2
}

.els:nth-child(4) {
  order: 5
}

.els:nth-child(5) {
  order: 3
}

.els:nth-child(6) {
  order: 6
}
<div class="container">

<div class="els">1</div>
<div class="els">2</div>
<div class="els">3</div>
<div class="els">4</div>
<div class="els">5</div>
<div class="els">6</div>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .