将左侧的div与css对齐，将它们分成组，没有换行符

Question

我正在寻找一种方法来对齐左边的div，但是，将它们分成几组，没有一组破坏线。下面的代码很接近，但我想得到图像的结果。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

上面的代码给了我这个结果（CURRENT）：

但我想得到其他结果（希望）：

可能吗？

Answer 1

如果显示的边框仅供参考，您可以尝试将外部div设置为display: inline;。如果您需要边框，可以将其设置为包含选择器的第一个和最后一个孩子：.group:first-child和.group:last-child。 使用float覆盖inline，但只要inline像文字一样对齐，就不需要浮动。

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