html - 使用 materialize css .col div 来创建(不应遵循行线)以制作如下图所示的内容

Question

我正在使用 Materialize css 制作博客。并发现很难用物化网格列创建一些东西。 请参阅下面的描述...

我的html代码是这样的

<div class="row">
  <div class="col l6 m12 s12">
    <div class="my-content">
      -----FIRST-content-goes-here-----
    </div>
  </div>
  <div class="col l6 m12 s12">
    <div class="my-content">
      -----SECOND-content-goes-here-----
    </div>
  </div>
</div> <!--row -->

忽略 css 部分，下图表示它是如何工作的:

但我希望像这张图片中那样创建 (.l6) 列:

我认为 CSS 对这些 div 位置起着一定的作用，我们将不胜感激。

Answer 1

使用 CSS3 flexbox 可以轻松做到这一点。

我在下面添加了一个片段。

.col{
  display:flex;
  flex-direction:column;
  }
.box{
  width:100px;
  height:100px;
  background:gray;
  border:1px solid #000;
  }
.parent{
  display:flex;
  flex-direction:row;
  }
.diff{
  height:200px;
  }
.one{
  height:70px;
  }
.three{
  height:30px;
  }

<div class="parent"> 
    <div class="col">
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
    </div>
    <div class="col dif">
      <div class="box one">
      </div>
      <div class="box diff">
      </div>
      <div class="box three">
      </div>
    </div>
</div>