Aligner les divs sur la gauche avec css, les séparer en groupes, sans rupture de ligne

Question

Je cherche un moyen d'aligner les divs sur la gauche, cependant, les diviser en groupes, sans qu'un groupe ne casse la ligne. Le code ci-dessous se rapproche mais je voudrais obtenir le résultat de l'image.

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

Le code ci-dessus me donne ce résultat (COURANT):

Mais je voudrais obtenir cet autre résultat (Souhaitée):

C'est possible?

Answer 1

Si les bordures sont indiquées à titre de référence uniquement, vous pouvez essayer de définir le div extérieur à display: inline;. Si vous avez besoin de bordures, vous pouvez définir le premier et le dernier enfants avec des sélecteurs: .group:first-child et .group:last-child. L'utilisation de float remplace inline, mais tant que inline sont alignés comme un texte, vous n'avez pas besoin de float.

.group { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: #008040; 
 
    overflow: auto; 
 
    padding:5px; 
 
    /*float:left;*/ 
 
    margin-left: 5px; 
 
    margin-top:5px; 
 
    display: inline; 
 
} 
 

 
/* 
 
.group:first-child { 
 
    margin-left: 5px; 
 
    border-left: 1px solid green; 
 
} 
 

 
.group:last-child { 
 
    margin-right: 5px; 
 
    border-right: 1px solid green; 
 
}*/ 
 

 
.machine { 
 
    /*float: left;*/ 
 
    border-color: red; 
 
    height: 75px; 
 
    width: 50px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    box-sizing:border-box; 
 
    display: inline-block; 
 
}

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

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