Ebeveyn kabının genişliğinin olmadığı yüzer divları nasıl hizalarsınız?

Benzer sorular daha önce sorulmuştu biliyorum ama ebeveyn div kesin bir cevap ile bilinmeyen bir genişliğe sahip bir tane görmedim.Ebeveyn kabının genişliğinin olmadığı yüzer divları nasıl hizalarsınız?

İşte durum şu.

<style> 
.parent { 
    width: 100%; 
} 

.child { 
    width: 300px; 
    float: left; 
} 

</style> 

<div class="parent> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    ... 
    <div class="child></div> 
<div>

Temelde, destekleyebilir kullanıcının ekran çözünürlüğü gibi üst kapsayıcı içinde birçok çocuk div'leri sığdırmak istiyorum.

IE7'yi desteklemek istediğim için css3 medya sorgularını kullanmak istemiyorum.

Ebeveyne genişlik belirlemek için javascript kullanmayı denedim, ancak içerik yüklendikten sonra ortama atladığında ideal değil. Herhangi bir fikir?

kaynak

2011-11-15 tkaravou

http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu Sen '

' elemanı gerekmez – reisio

cevap

Bu, javascript kullanmadan en yakın çözümdür. display:inline-block;, divs yan çubuk tarafını ve merkezde aynı anda olmasını sağlar. display:table-cell;'a dönmeyi deneyin ama işe yaramadı. Bu nedenle güçlü merkezleme davranışı için gerçek <table>'u kullanmanız gerekir.

http://jsfiddle.net/Dgdhr/

Düzenlendi: http://jsfiddle.net/Dgdhr/1 (tabloya olmadan: teşekkürler MartinodF için)

<table width="100%"> 
<tr> 
<td align="center"> 
      <div class="child">1</div> 
      <div class="child">2</div> 
      <div class="child">3</div> 
      <div class="child">4</div> 
      <div class="child">5</div> 
      <div class="child">6</div> 
</td> 
</tr> 
</table> 

.child { 
    width: 100px; 
    height:100px; 
    margin:10px; 
    display:inline-block; 
    background:#e0e0e0; 
}

kaynak

2011-11-15 03:53:33

. Bkz. Http://jsfiddle.net/MartinodF/Dgdhr/1/ – MartinodF

Buradaki problem, çocuklar için farklı içerikler içeriyorsa; http://jsfiddle.net/Dgdhr/76/ – Marcus

Hemen yerine float: left; ve .parent kullanım text-align: center için display:inline-block; kullanın.

kaynak

2012-07-14 21:08:33 Roman

Teşekkürler teşekkürler :) – Farshid

Romalı yanıtı kullanarak bununla bitti. Ebeveyn divumun içindeki bütün div orda olacak, bu yüzden çocuk sınıfını ayarlamana gerek yok.

.parent{ 
    text-align: center; 
} 

.parent div{ 
    display: inline-block; 
}

kaynak

2014-03-07 00:28:04

Ebeveyn kabının genişliğinin olmadığı yüzer divları nasıl hizalarsınız?

cevap

İlgili konular