html - 格式化迭代记录以平铺格式排列

Question

我迭代了一个数据库记录，它每行拉取记录，我如何格式化它以将它们排列为图 block ，这意味着第二个到第一个将并排排列，第三个将在第一个的底部第四个在第三个的底部？ db 记录将始终为 4。

这是代码:

@foreach($splitProcedure as $procedureSelected)
                                <TH>{!! $procedureSelected !!}</TH><TH>DESCRIPTION</TH>
                                <TR><TD><div><p>You have used <span class="css-button" id="counter2"></span> words.</p>{!! Form::textarea('productdescription', Input::old('productdescription'), ['class'=>'mid first-input-div', 'placeholder'=>'Please, within 200-250 characters describe what the company is about', 'id'=>'productdescription']) !!}</div></TD><TD></TD></TR>
                                <TR><TD><div>{!! Form::text('productname', Input::old('productname'), ['class'=>'mid first-input-div', 'placeholder'=>'enter company name', 'id'=>'productname']) !!}</div></TD><TD></TD></TR>
                                {!! Form::hidden('hiddenCompanyId', Input::old('selectedCompanyHiddenId'), ['id'=>'selectedCompanyHiddenId']) !!}
                                {!! Form::hidden('hiddenCompanyName', Input::old('selectedCompanyHidden'), ['id'=>'selectedCompanyHidden']) !!}

                                @endforeach

Answer 1

我建议您使用以下框架:bootstrap 或 foundation 来实现此目的，或者编写您自己的 css 来创建此类图 block 并将您的数据添加到其中。而不是使用 html 表格，因为我认为它真的很难或不可能设计它，因为如果您观察到来自数据库的行被直接插入到标签中，那么您可以看到，您没有具有您正在寻找的格式的预定义表格。

您可以通过创建一个包含您喜欢的行和列的表来实现它，然后从数据库中获取每一行并将它们插入并硬编码到您想要的正确位置(这是一种不好的方法，因为一旦您添加数据库中再多一行就全部中断了)。

或者你可以这样做:

<div class="row">
@foreach
    <div class="col-xs-12 col-md-6">
       //Your data here create a single tile with product name, company id, etc
    </div>
@endforeach
</div>

foreach 循环会将每一行数据插入到每个图 block 中。但是您需要框架或 CSS 技能才能获得正确的结果。