3

Estou procurando uma forma de alinhar divs á esquerda, porém, mante-las divididas em grupos, sem que um grupo quebre a linha. O código abaixo chega perto, mas gostaria de obter o resultado da imagem.

.group {
    border-width: 1px;
    border-style: solid;
    border-color: #008040;
    overflow: inherit;
    padding:5px;
    float:left;
    margin-left: 5px;
    margin-top:5px;
}

.machine {
    float: left;
    border-color: red;
    height: 75px;
    width: 50px;
    border-width: 1px;
    border-style: solid;
    box-sizing:border-box;    
}
<div id="group1" class="group">
    <div id="subDiv1" class="machine">1</div>
    <div id="subDiv2" class="machine">2</div>
    <div id="subDiv3" class="machine">3</div>
    <div id="subDiv4" class="machine">4</div>
</div>

<div id="group2" class="group">
    <div id="subDiv1" class="machine">1</div>
    <div id="subDiv2" class="machine">2</div>
    <div id="subDiv3" class="machine">3</div>
    <div id="subDiv4" class="machine">4</div>
</div>

<div id="group3" class="group">
    <div id="subDiv1" class="machine">1</div>
    <div id="subDiv2" class="machine">2</div>
    <div id="subDiv3" class="machine">3</div>
    <div id="subDiv4" class="machine">4</div>
</div>

O código acima me dá este resultado (ATUAL):

inserir a descrição da imagem aqui

Mas eu gostaria de obter este outro resultado (DESEJADO):

inserir a descrição da imagem aqui

É possível?

2
  • Complicado de fazer isso, eu particularmente não consigo imaginar um jeito simples de fazer ou algo pronto que faça, teria que identificar o "group" que excede a largura da tela e modificá-lo, por ai vai...Surgiram algumas ideia, mas nenhuma de simples implementação, caso eu encontre algo, posto aqui.
    – Mathiasfc
    Commented 31/05/2017 às 17:42
  • Este código chega muito próximo ao resultado esperado [link]stackoverflow.com/a/44293889/1872936
    – pires
    Commented 31/05/2017 às 21:32

1 Resposta 1

3

Acho que assim chega bem perto do que você procura. Mas fica bem difícil alinhar.

.group {
  display: inline;
  border-width: 1px;
  border-style: solid;
  border-color: #008040;
  padding: 35px 5px;
  margin-left: 5px;
  margin-bottom: 15px;
  line-height: 75px;
}

.machine {
  display: inline-block;
  border-color: red;
  height: 75px;
  width: 50px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 20px;
}
<div id="group1" class="group">
  <div id="subDiv1" class="machine">1</div>
  <div id="subDiv2" class="machine">2</div>
  <div id="subDiv3" class="machine">3</div>
  <div id="subDiv4" class="machine">4</div>
</div>

<div id="group2" class="group">
  <div id="subDiv1" class="machine">1</div>
  <div id="subDiv2" class="machine">2</div>
  <div id="subDiv3" class="machine">3</div>
  <div id="subDiv4" class="machine">4</div>
</div>

<div id="group3" class="group">
  <div id="subDiv1" class="machine">1</div>
  <div id="subDiv2" class="machine">2</div>
  <div id="subDiv3" class="machine">3</div>
  <div id="subDiv4" class="machine">4</div>
</div>

EDIT

Se você não fizer questão dos espaços entre os grupos... Ele é o que efetivamente desalinha tudo:

.group {
  display: inline;
  border-width: 1px;
  border-style: solid;
  border-color: #008040;
  padding: 35px 0px;
  margin-bottom: 15px;
  line-height: 75px;
}

.machine {
  display: inline-block;
  border-color: red;
  height: 75px;
  width: 50px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  text-align: center;
  margin: 0 3px 25px;
}
<div id="group1" class="group">
  <div id="subDiv1" class="machine">1</div>
  <div id="subDiv2" class="machine">2</div>
  <div id="subDiv3" class="machine">3</div>
  <div id="subDiv4" class="machine">4</div>
</div>

<div id="group2" class="group">
  <div id="subDiv1" class="machine">1</div>
  <div id="subDiv2" class="machine">2</div>
  <div id="subDiv3" class="machine">3</div>
  <div id="subDiv4" class="machine">4</div>
</div>

<div id="group3" class="group">
  <div id="subDiv1" class="machine">1</div>
  <div id="subDiv2" class="machine">2</div>
  <div id="subDiv3" class="machine">3</div>
  <div id="subDiv4" class="machine">4</div>
</div>

4
  • Ficou excelente. Obrigado! Agora surgiu mais uma demanda: Preciso colocar um header no topo de cada grupo (acima das máquinas), por exemplo: Grupo 1, Grupo 2, etc...
    – pires
    Commented 1/06/2017 às 19:09
  • Este seria o resultado final que preciso: i.sstatic.net/8VG3N.png
    – pires
    Commented 1/06/2017 às 22:59
  • @pires E como você imagina isso dando certo quando se quebrasse no final da página? Commented 2/06/2017 às 11:05
  • Ainda não faço idéia, mas, talvez repedir o header.
    – pires
    Commented 2/06/2017 às 22:19

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 .