Align divs on the left with css, separating them into groups, without line break

Question

Align divs on the left with css, separating them into groups, without line break

Navigation

#1 by (3 votes)

3

I'm looking for a way to align divs to the left, however, keep them divided into groups, without a group breaking the line. The code below comes close, but I would like to get the result of the 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>

The above code gives me this result (CURRENT):

ButIwouldliketogetthisotherresult(DESIRE):

Is it possible?

javascript html css

asked by anonymous 31.05.2017 / 19:22

1 answer

Differences between authentication types How to return function correctly? (Scope of Variables)

score 3 · Accepted Answer

I think it comes close to what you're looking for. But it is very difficult to align.

.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

If you do not mind the spaces between groups ... It's what really disarms everything:

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