資料の流れ

Question

私は材料に問題があります：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：誰も私を助けることができるmaterializecss@0.98.0 を使用して

@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 

？

Answer 1

こんにちは、現在のところ、あなたは50％幅の2つの親divを使用し、このようなdivにコンテンツを置く必要がある単一の親にすべてのdivを挿入しています。それに応じて動作するように、blade.phpのforeachループを変更してください。 foreachループで必要に応じてフラグを使用できます

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