並排動態對齊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

假設flow是父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 */
}

Answer 2

允許多個div並排的首選方法是應用CSS規則display: inline-block 。 這使您可以指定寬度和高度。

在w3schools中查看以下示例： http : //www.w3schools.com/css/css_inline-block.asp

我鼓勵您使用“親自嘗試”示例來了解內聯塊的工作原理以及為什么它比使用float更受青睞。