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，但没有成功。

我认为这应该很容易解决，但是，我无法解决它…

Answer 1

首先从.blocks_container 中删除display:flex

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

并将固定的width: 200px;赋予.block_content，因为分区中没有更多内容

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

工作Fiddle

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

Answer 2

对于屏幕宽度，您必须在head标记中放入一个meta标记。

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

Answer 3

使用@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%;
  }
}

Answer 4

如果使用flex，则可以指定flex-direction。所以你可以在手机上试试这个。

flex-direction: column;

以及更大的屏幕：

flex-direction: row ;