html - 如何使用物化创建面向列的布局？

Question

我正在尝试使用物化框架将两张卡放在一张更大的卡旁边。

我目前使用的代码如下所示：

<div class="row">   
<div class="col s6">
      <div class="card-panel">        
          <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p1</h5>
          </div>      
      </div>
</div>
<div class="col s6">
      <div class="card-panel">
        <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p3</h5> 
        </div>    
      </div>
</div>
<div class="col s6">
      <div class="card-panel">        
          <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p2</h5>
          </div>      
      </div>
</div>
</div>

结果如下所示：

但我想直接放在旁边p1，这样布局看起来像这样：p2p3

这是否可能使用物化？

标签： htmlcsslayoutmaterialize

Answer 1

你可以尝试这样的事情。

<div class="row">
   <div class="col s6">
     <div class="row">
       <div class="col-12">
         P1
       </div>
     </div>
     <div class="row">
       <div class="col-12">
          p2
       </div>
     </div>
   </div>

   <div class="col s6">
      P3
   <div>
</div>