具体化中的响应列

Question

我正在使用MaterializeCSS(http://materializecss.com/)，我一直在为网格布局而苦苦挣扎。

假设我有 4 列的 4 个内容。如果这些列的内容重叠，我希望它们负责任地分成两行。

示例：
[[A][B]] [[C][D]]<-每个字母表示列的每个内容。如果这些内容开始重叠，我希望它们像这样包装：

[[A][B]]
[[C][D]]

而且，如果我更多地调整窗口大小并且 A 和 B 或 C 和 D 开始重叠，我希望每个内容都在单独的"行/行"上：

[A]
[B]
[C]
[D]

我的代码如下所示：

<div class="container">
<div class="row">
<div class="col l6 m6 s12">
<div class="row">
<div class="col s6">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</div>
<div class="col s6">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</div>
</div>
</div>
<div class="col l6 m6 s12">
<div class="row">
<div class="col s6">
<div>
<i style="color: #4267b2" class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
<i style="color: #1da1f2; margin-left:10px" class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
</div>
</div>
<div class="header-col4 col s6">
<a href="#" target="_blank">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</a>
</div>
</div>
</div>
</div>
</div>

我尝试了很多方法，但没有一种方法能像我想要的那样解决问题。

我还想让这些内容垂直和水平地居中父div。

我设法实现列像我想要的那样换行，除了第三列和第四列重叠，因为图像在父div 之外。

感谢您的任何帮助！ 我真的很感激！

Answer 1

嗨，我不确定你想要实现什么。.

请参阅下面的示例代码。

<div class="container">
<div class="row">
<div class="col l6 m6 s12">
<div class="row">
<div class="container col l6">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</div>
<div class="container col l6">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</div>
</div>
</div>
<div class="col l6 m6 s12">
<div class="row">
<div class="container col l6">
<a href="#" target="_blank">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</a>
</div>
<div class="container header-col4 col l6">
<a href="#" target="_blank">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</a>
</div>
</div>
</div>
</div>
</div>

我做了什么，我将 img 父级更改为 col l6 ..

似乎 col s6 正在使其将div 相互重叠。

<div class="container col l6">
<a href="#" target="_blank">
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</a>
</div>

使这些内容垂直和水平地居中父div。 我在 img 父级中添加了一个类 (.container) 并添加了弹性框。

.container{
display: flex;
align-items: center;
justify-content: center;
}

希望这有帮助。

Answer 2

示例：[[A][B]] [[C][D]] <- 每个字母代表 列。如果这些内容开始重叠，我希望它们包装 喜欢这个：

[[阿][B]][[中][D]
]

我认为你应该尝试

row
col l3 m6 s6

但仅适用于每个div

更新：

<div class="col l3 m6 s6"> <-- like this
<img height="200" src="https://www.lg.com/cz/content/img/support/img-dummy-product.jpg">
</div>