Dinamik olarak hizaları div yan yana hizalayın

Question

Ebeveyn-çocuk ilişkileri üzerinde çalışıyorum. Bir şirket model ve ürün modelim var, bir şirketin ürünlerini kaydettiğimde, yan yana dizilmesini istiyorum, çünkü varsayılan olarak div'ler dikey olarak hizalanıyor, onları yatay olarak nasıl hizalayabilirim? Bunu statik olarak nasıl yapılacağını gösteren bir çift cevap gördüm, ancak bunlar dinamik kayıtlar olduklarından, dinamik olarak oluşturulan div'leri kullanarak bunları yan yana nasıl hizalarım? flow varsayarak Bu CSS kuralı yardımcı olabilecek

@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

, üstüdür.

.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

birden div'ler yan yana olmasını sağlamak için tercih edilen bir yol CSS kuralını display: inline-block uygulamaktır. Bu bir genişlik ve yükseklik belirtmenize izin verir.

Kontrol dışarı W3Schools'da gelen bu örneği: http://www.w3schools.com/css/css_inline-block.asp

buna şamandıra kullanma göre tercih nasıl inline-block eserleri ve neden görmek için 'Kendiniz deneyin' örneğini kullanmak için teşvik ediyoruz.