动态并排对齐div

Question

我在研究亲子关系。我有一个公司模型和产品模型，当我拉取公司产品的记录时，我希望它们并排对齐，因为div默认是垂直对齐的，我如何让它们水平对齐？我已经看到了一些答案，它们展示了如何静态地执行此操作，但由于这些是动态记录，我如何使用动态生成的div并排对齐它们呢？

@foreach($product as $products)
  @if($company->id === $products->company_id)
     <div class="flow">{!! Html::linkRoute('companyContactView', $products->productname, $products->company_id) !!}</div>  |  
  @endif
@endforeach

Answer 1

允许多个div并列的首选方法是应用CSS规则display: inline-block。这允许您指定宽度和高度。

从w3schools查看此示例：http://www.w3schools.com/css/css_inline-block.asp

我鼓励你使用“自己试试”的例子来看看内联块是如何工作的，以及为什么它比使用float更受欢迎。

Answer 2

假设flow是父对象，这条CSS规则可能会有所帮助。

.flow {
  white-space: nowrap;      /* make them stay on 1 line all the time */ 
}

.flow > div {
  display: inline-block;
  vertical-align: top;      /* or middle, or ..., how you want them to align */
}