Aligner dynamiquement les divs côte à côte

Question

Je travaille sur la relation parent-enfant. J'ai un modèle d'entreprise et un modèle de produit, quand je tire le record des produits d'une entreprise, je veux qu'ils soient alignés côte à côte, puisque les div par défaut s'alignent verticalement, comment les aligner horizontalement? J'ai vu quelques réponses qui montrent comment le faire de façon statique mais comme ce sont des enregistrements dynamiques, comment les aligner côte à côte en utilisant des divs générés dynamiquement?

@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

Cette règle CSS pourrait aider, en supposant flow est le parent.

.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

La meilleure façon de permettre à plusieurs divs d'être côte à côte est d'appliquer la règle CSS display: inline-block. Cela vous permet de spécifier une largeur et une hauteur.

Découvrez cet exemple de W3Schools: http://www.w3schools.com/css/css_inline-block.asp

Je vous encourage à utiliser le « Essayez vous-même » par exemple pour voir comment fonctionne inline-block et pourquoi il est préférable à l'aide de flotteur.