复杂的定位元素（乘法行）

Question

所有

告诉我如何对元素进行编程，这样当你改变屏幕尺寸时，元素的一部分被放置在几行中，而另一部分则被放置在一行中

两种情况： https://s13.postimg.org/pswl5sfjr/example.png

html示例： 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;
}

Answer 1

如果我理解正确，就像这样？ See this fiddle

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

Answer 2

根据你的问题，我认为我最接近90％..

检查我的小提琴：Demo

我不得不使用position属性播放..抱歉没有发布css太多行了。