Question

我正在使用MaterialiseCSS（http://materializecss.com/）并且我一直在努力进行网格布局。

我们说我有4列4个内容。如果这些列的内容重叠，我希望它们响应地断开两行。

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

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

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

[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

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

[[A] [B]]
    [[C] [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>

Answer 2

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

请参阅下面的示例代码。

 <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）并添加了flexbox。

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

希望这有帮助。

Materialise中的响应列

2 个答案: