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

Question

全部

告诉我如何对元素进行编程，以便当您更改屏幕大小时，元素的一部分位于几行中，而其他元素则位于一行中

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

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

检查我的 fiddle : Demo

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

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

complex positioning elements (multiply rows)

html

css

position

alignment

elements