CSS对齐DIV到新规则？

Question

我有一个包含两个 div 元素的 div 容器。在桌面版本中，这两个 div 元素会并排对齐。

在移动视图中，我希望它们彼此下方排列。所以我想只需将 min-width 更新为 100%，就可以强制下一个 div 在下一行。

但实际上……它们仍然并排排列，只是屏幕宽度变成了两倍大。

<div class="blocks_container">
   <div class="block_content">
       Some content
   </div>
   <div class="block_content">
       Some content
   </div>
</div>

.blocks_container {
    width: 100%;
    margin: 40px 0 40px 0;
    display: flex;
    align-items: center;
}

.block_content {
    display: inline-block;
    min-width: 100%;
    margin: 3% 2% 2% 0;
}

我尝试使用float: left并将display属性设置为block，但是没有成功。

我认为这个问题应该很容易解决，但是我自己无法解决它.....

- Interactive

---

首先，您错过了关闭 div。 - ketan

明白了。这只是一个例子，不是在真实环境中使用！ - Interactive

你说的“移动视图”是什么意思？你在测试哪些浏览器？你设置了meta viewport吗？这真的是你的HTML（因为它无效）吗？阅读http://sscce.org/可能会有所帮助。 - Quentin

flex-wrap 可能是你需要调查的内容... - deceze

为什么要使用min-width？为什么不直接使用width？如果使用width设置为100%，那么它将强制下一个div到底部。 - chriz

嗯。移动视图...这个名字真的很形象。一个移动设备，其中@media定义了该特定视图宽度的CSS。目前我正在iPhone 3、4和5上进行测试。meta viewport已设置为：<meta name="viewport" content="width=device-width, initial-scale=1">是的，这是我的HTML。就像@ketan所说的那样，这已经改变了。 - Interactive

Answer 1

首先，从 .blocks_container 中移除 display:flex。

.blocks_container {
    width: 100%;
    margin: 40px 0 40px 0;
    align-items: center;
}

给 .block_content 固定的宽度为 200px;，因为这个 div 中没有更多的内容。

.block_content {
    display: inline-block;
    width: 200px;
    margin: 3% 2% 2% 0;
}

为了根据屏幕大小设置div建议使用媒体查询

工作示例

- ketan

---

我不明白你的问题。也许是我错了，或者你没有正确解释你的问题？@交互式！ - Praveen Kumar Purushothaman

Answer 2

使用@media查询在较小的屏幕上堆叠div。它们易于使用和控制。

.blocks_container {
    width: 100%;
    margin: 40px 0 40px 0;
    display: flex;
    align-items: center;
}
.block_content {
    display: inline-block;
    width: 48%; //to compensate 2% right margin
    margin: 3% 2% 2% 0;
}
@media screen and (max-width: 360px) {
  .block_content {
    width: 98%;
  }
}

- Dani Vijay

Answer 3

对于屏幕宽度，您需要在head标签内放置一个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- Shashank

Answer 4

如果你正在使用 flex，你可以指定 `flex-direction`。因此，你可以在移动设备上尝试这个方法。

flex-direction: column;

还有更大的屏幕：

flex-direction: row ;

- Gerico