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

这个CSS规则可能有所帮助，假设flow是父。

.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 */
}

Answer 2

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

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

我鼓励您自己动手使用＆＃39;示例看看内联块如何工作以及为什么它比使用float更受欢迎。

并排动态对齐div

2 个答案: