Align left-hand Divs with css, separating them into groups, with no line break

Asked

Viewed 190 times

3

I’m looking for a way to line up divs on the left, however, keep them divided into groups, without a group breaking the line. The code below comes close, but 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 code above gives me this result (CURRENT):

inserir a descrição da imagem aqui

But I would like to get this other result (DESIRED):

inserir a descrição da imagem aqui

It is possible?

javascript html css

  • Complicated to do this, I particularly can’t imagine a simple way to do or something ready to do, I would have to identify the "group" that exceeds the width of the screen and modify it, so it goes... Some ideas have emerged, but none of simple implementation, in case I find something, put here.

  • This code comes very close to the expected result [link]https://stackoverflow.com/a/44293889/1872936

1 answer

3


I think that way it gets very close to what you’re looking for. But it’s really hard to line up.

.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 don’t mind the spaces between the groups... It is the one that effectively dislocates 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>

  • It was excellent. Thanks! Now came another demand: I need to put a header at the top of each group (above the machines), for example: Group 1, Group 2, etc...

  • This would be the final result I need: https://i.stack.Imgur.com/8VG3N.png

  • @And how do you imagine it working when it breaks at the bottom of the page?

  • I still have no idea, but maybe rethink the header.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.