javascript - 物化CSS : 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 插入单父级中，您需要使用两个 50% 宽度的父级 div，并将内容放入这些 div 中，如下所示。更改 Blade.php 中的 foreach 循环以使其相应地工作。如果需要，您可以在 foreach 循环中使用标志

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