html - 如何模拟自举网格的自适应性

我有两个共享父容器的内联div。 div的宽度为49％，以使其水平对齐。我想做的是在将父容器的大小调整为特定宽度之后。这两个div都好像它们是块元素一样，占据了新的一行并占用了100％的容器。我不想使用引导程序，因为这是我唯一需要的功能，而且看起来很容易模仿，只需要一些了解即可。这是基本布局

<div class="container">
  <div class="cell">

  </div>
  <div class="cell">

  </div>

</div>

最佳答案

原理很简单：

.container > div {
  width: 50%;
  float: left;
}
@media (max-width: 800px) {
  .container > div {
    width: 100%;
    float: none;
  }
}

/* the css from this point on is not important, i just added it for clarity */

.container > div {
  text-align: center;
  background-color: #eee;
  border: 1px solid white;
  padding: 20px;
  box-sizing: border-box;
}

<div class="container">
  <div class="cell">
    First cell
  </div>
  <div class="cell">
    Second cell
  </div>
</div>

800px是布局更改的地方。您可以根据需要具有任意多个@media查询。这是您可以使用的media features的完整列表。

关于html - 如何模拟自举网格的自适应性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34645233/