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;
}

所以我尝试用display: block更改为float: left，但没有运气。

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

Answer 1

首先从display:flex

中删除.blocks_container

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

并将固定width: 200px;提供给.block_content，因为div中没有更多内容。

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

Working Fiddle

根据屏幕尺寸设置div建议使用media query

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%;
  }
}

Answer 3

对于屏幕宽度，您必须在头标记内放置元标记。

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

Answer 4

如果您使用的是flex，则可以具体flex-direction。所以你可以试试这款手机。

flex-direction: column;

更大的屏幕：

flex-direction: row ;

CSS对齐DIV到新规则？

4 个答案: