Materilalizecss: Card Flow

Question

У меня проблема с materializecss: я не могу создать поток карт, которые отображали бы их как Google Keep: каждая карта занимает столько места, сколько необходимо, и они помещаются рядом друг с другом, загадки'. Я пробовал весь день, но ничего не добился. Поток выглядит это прямо сейчас:

Я хотел бы макет выглядеть следующим образом:

Я разрабатываю приложение с Laravel 5.3. Мой код выглядит следующим образом:

index.blade.php:

@extends('layouts.standalone_module', ['brand_logo' => $page->page_title]) 

@section('mod_title') 
    {{ $page->page_title }} 
@endsection 

@section('mod_breadcrumbs') 
    <a href="{{ $base_slug }}" class="breadcrumb">{{ \App\Toolbox::string_truncate($page->page_title, 25) }}</a> 
@endsection 

@section('mod_main') 
     <div class="col s10 offset-s1 card-panel white-text teal z-depth-2 hoverable center row"> 
      <h3 class="col s12">{{ $page->page_title }}</h3> 
      <div class="col s12 row white divider" style="height: 2px;"></div> 
      <h5 class="col s12">{{ $page->page_header }}</h5> 
     </div> 
      @include('hydrogen::partials/list', ['atoms' => $atoms]) 
@endsection 

list.blade.php:

@php 
$ct = 0; 
@endphp 

@foreach ($atoms as $key => $atom) 
    @php 
    $ct++ 
    @endphp 
    <div class="container col s6 row"> 
     <div class="card hoverable z-depth-2 center"> 
      @if($atom->hasImage) 
       <div class="card-image waves-effect waves-block waves-light"> 
        <img class="activator" src="{{ $atom->image }}"> 
       </div> 
       <div class="card-reveal"> 
        <span class="card-title col s12"><span class="left">{{ $atom->title }}</span><i class="material-icons teal-text right">close</i><a href="{{ $base_slug }}/atom/{{ $atom->id }}"><i class="material-icons right">open_in_new</i></a></span> 
        <div class="divider teal col s12" style="margin-top: 5px; margin-bottom: 10px;"></div> 
        {!! $atom->description !!} 
       </div> 
      @else 
       <div class="card-title"> 
        <div class="col s12" style="height: 15px;"></div> 
        <div class="col s10"> 
         <p class="truncate left"> 
          &nbsp;&nbsp;{{ $atom->title }} 
         </p> 
        </div> 
        <div class="col s2"> 
         <a href="{{ $base_slug }}/atom/{{ $atom->id }}"><i class="material-icons teal-text">open_in_new</i></a> 
        </div> 
       </div> 
      @endif 
      <div class="card-content"> 
       @if($atom->hasImage) 
        <span class="card-title activator" style="text-align: left;"> 
         {{ $atom->title }} 
         <i class="material-icons right">more_vert</i> 
        </span> 
        <p class="teal-text" id="artificial-link" style="text-align: left;" onclick="window.location.href='{{ $base_slug }}/atom/{{ $atom->id }}'">{{ trans("hydrogen::hydrogen.atom_card_link_read") }}</p> 
        <style> 
         #artificial-link:hover{ 
          cursor: pointer; 
         } 
        </style> 
       @else 
        <div class="divider teal col s12" style="margin-top: 5px; margin-bottom: 10px;"></div> 
        {!! $atom->description !!} 
       @endif 
      </div> 
     </div> 
    </div> 
@endforeach 

@if ($ct == 0) 
    @include('partials/error', ['error' => trans("hydrogen::messages.err_no_atoms")]) 
@endif 

Использование materializecss@0.98.0 Может кто-нибудь мне помочь?

Answer 1

В настоящее время вы вставляете все свои div (s) в одном родителе, вам нужно использовать два родительских div (s) ширины 50% и разместить контент в этих divs, подобных этому. Измените цикл foreach на blade.php, чтобы он работал соответствующим образом. вы можете использовать флаг, если необходимо, в петле foreach

<div class="col-s6"> 
div1 
div2 
div3… 
</div> 
<div class="col-s6"> 
div4 
div5 
div6… 
</div>