angularjs - CSS 中的渐进定位框分两列

Question

我正在为菜单构建类似于此 UI 的内容:

我正在寻找一种好方法来实现它。 我在这个元素中使用 Bootstrap 。 该容器是 Bootstrap 的 container-fluid ，位于其他 DIV 中，占屏幕宽度的 50%。这就是我使用 container-fluid 的原因 - 因为这不是固定宽度的容器。

我可以使用 bootstrap (3) Grid (col-xx-x) 或任何其他 CSS 解决方案。

这就是我到目前为止所做的，使用float: left

* {
  box-sizing: border-box;
}

.container-fluid {
  margin-top: 75px;
}

.menu-items {
  padding: 0;
  position: relative;
  list-style-type: none;
  text-align: center;
}

.menu-item {
  display: inline-block;
  float: left;
  width: 50%;
  height: 250px;
}

.menu-item:nth-child(odd) {
  margin-top: -65px;
}
.menu-item:nth-child(even) {
  margin-top: 95px;
}

.image-wrapper{
  display: inline-block;
}

.image {
  background-color: gray;
  width: 80px;
  height: 100px;
}

<div class="container-fluid">
  <ul class="menu-items">
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 1</span>
      </div>
    </li>
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 2</span>
      </div>
    </li>
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 3</span>
      </div>
    </li>
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 4</span>
      </div>
    </li>
  </ul>
</div>

你会如何实现它？

像我一样使用 float ？ Flex 不是向后兼容性问题的选择。 使用引导网格？ 其他方式？

Answer 1

您可以使用纯 CSS，通过 float 和 clear 来实现此目的，您只需向 block 添加 margin 即可。演示:

.container:after {
  content: "";
  display: table;
  clear: both;
}

.a,
.c {
  float: left;
}

.c {
  margin-top: 10px;
}

.b,
.d {
  float: right;
  margin-top: -30px;
}

.clear {
  clear: both;
}

/* just styles for demo */
.container {
  background-color: #e0e0e0;
  padding: 30px;
}

/* just styles for demo */
.item {
  background-color: orange;
  font-size: 2em;
  color: white;
  padding: 10px;
}

<div class="container">
  <div class="item a">One</div>
  <br class="clear" />
  <div class="item b">Two</div>
  <br class="clear" />
  <div class="item c">Three</div>
  <br class="clear" />
  <div class="item d">Four</div>
  <br class="clear" />
</div>