实现嵌套cols布局

Question

我正在尝试2天来做这个布局：

是否可以使实体网格显示图像中的布局。 如果是这样，请帮助，如果你能＆amp;请给出一些提示。 非常感谢。

Answer 1

试试这个

 <div class="row">
      <div class="col s3">Content 1 </div>
      <div class="col s6">Content 2 </div>
      <div class="col s3">Formmmm</div>
<div class="row">
      <div class="col s3">Content 3 </div>
      <div class="col s6">Content 4 </div>
  </div>
</div>

Answer 2

将此视为具有两列的容器。第一列包含content1到4，第二列包含Form。 在第一列中创建两行，每行包含两列。第一行包含content1和2，第二行包含Content3和4。 喜欢这个

build.gradle

请注意，为了使Form Form（second-col）与Content1到Content4的first-col Column的高度相同，无论内容如何。您将不得不使用flex添加样式。

<div class container>
  <div class="row parent-row">
     <div class="col s8 m8 l8 first-col">
       <!-- this contains content1 to 4 -->
       <div class="row row-1">
           <div class="col s4 m4 l4 content-1">
              Content 1
           </div>
           <div class="col s4 m4 l4 content-2">
              Content 2
           </div>
       </div>
       <div class="row row-2">
            <div class="col s4 m4 l4 content-3">
              Content 3
           </div>
           <div class="col s4 m4 l4 content-4">
              Content 4
           </div>
       </div>
     </div>
     <div class="col s4 m4 l4 second-col">
         Form
     </div>
  </div>
</div>

另请注意，您可以在css3中使用vh来强制您想要的高度。

.parent-row{
  display:flex;
  flex-wrap:wrap;
}
//some where in project.css

最后你必须注意在所有情况下col宽度如何加起来为12。例如，对于第一列，我们有s8作为宽度及其子项。 content-1和content-2加起来为s8 ==＆gt; S4 + S4。 虽然first-col和second-col加起来为s12 ==＆gt; （s8 + s4）