复杂的定位元素（多行）答案

【问题标题】：complex positioning elements (multiply rows)复杂的定位元素（多行）
【发布时间】：2016-03-29 21:55:50
【问题描述】：

全部

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

两种情况： 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;
}

【问题讨论】：

标签： html css position alignment elements

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

根据你的问题，我想我最接近 90%..

检查我的小提琴：Demo

我不得不使用 position 属性玩游戏。抱歉没有将 css 发布为太多行。

【讨论】：