Search code examples
htmlcsspositionalignmentelement

complex positioning elements (multiply rows)

all

tell me how to program elements so that when you change the screen size the one part of elements was positioned in several rows, and other - in a row

two cases: https://s13.postimg.org/pswl5sfjr/example.png

html example: https://jsfiddle.net/ehuoy97d/

<div class = "menu">
  <div class = "menu-border"></div>
  <div class = "menu-items-storage">
    <div class = "menu-item">#1</div>
    <div class = "menu-item">#2</div>
    <div class = "menu-item">#3</div>
    <div class = "menu-item">#4</div>
  </div>
  <div class = "menu-border"></div>
</div>

.menu {  
  width: 100%;

  background-color: #ffe0e0;

  font-size: 0px;
}

.menu .menu-border {
  display: inline-block;

  width: 75px;
  height: 30px;

  background: #bb0000;
}

.menu .menu-items-storage {
  display: inline-block; 
}

.menu .menu-item {
  display: inline-block;

  width: 30px;
  height: 30px;

  margin: 0px 10px;
  padding: 0px;

  font-size: 16px;

  border: 2px solid #80ff80;
  background-color: #e0ffe0;
}
Solution

  • If I understand correctly, like this ? See this fiddle

    .menu .menu-items-storage {
  display: inline-block; 
  width: 30%;
}