İki div hizalaması yan yana nasıl yapılır?

Question

Ben iki divs yan yana ya da temelde alışveriş sepeti ve öğeleri (yani jcart ve cartbox) float yapmaya çalışıyorum ama bunu elde edemiyorum. İşte demo: link

Ben cartbox css üzerinde float:right; değiştirmeyi denedim, ancak bu sadece alışveriş sepetini sağa hareket ettirirdi ve eğer cartbox css float kaldırırsam .. Sepeti ve öğeleri yan yana hizala ancak bazı nedenlerden dolayı sepetin gerçekten küçük olduğu ve "sepete ekle" düğmesinin tıklanmadığı görülüyor. Herhangi bir yardım takdir edilecektir!

HTML:

<form method="post" action="" class="jcart"> 
    <fieldset> 
     // item details here 
    </fieldset> 
    </form> 

    <div class='cartbox'> 
    <div id="jcart"><?php $jcart->display_cart();?></div> 
    <div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div> 
    </div> 

CSS:

#jcart { 
position:relative; 
font-size:1.15em; 
top:0; 
margin:0 0 .75em; 
} 

.jcart { 
width:135px; 
margin:0 20px 20px 0; 
padding-top:20px; 
border:solid 2px #E5E5E5; 
float:left; 
background:#F0F0F0; 
text-align:center; 
} 

.cartbox { 
float:left; 
position:relative; 
top:0; 
width:500px; 
margin:0; 
padding:0; 
} 

Sen div elemanları varsayılan stili var gibi, sen yan yana aynı hizaya isteyen unsurları display: inline-block eklemeniz gerekir

Answer 1

display: block, yatay olarak yerine dikey olarak yığılacaklar (istediğiniz davranışa değil).

Görünümden; alışveriş sepeti kutusu, içerik kabında da yan yana sığmayacak kadar geniş. centre kimliğine sahip div'u geniş (muhtemelen 960px yerine 1000 piksele) ve display özelliğini değiştirmenin eklenmesiyle birleştirin. Bunu değiştirmek almak için doğrudan yazmaya gerek kod açısından

, aşağıdakileri yapın:

#centre { 
    width: 1000px; 
} 

.cartbox { 
    display: inline-block; 
} 

DÜZENLEME: yerel web bu değişiklikleri değiştirilmiş ve işe yaradı gibi görünüyor.

Answer 2

@Sam Holmes

söylediğiniz gibi satır içi veya inline-block Ekran özelliğini kullanabilir veya şamandıra kullanma şeyler yapabiliriz. Böyle:

.cartbox div{ 
    float:left; 
} 

veya burada

.cartbox div{ 
    display:inline;// or display:inline-block; 
} 

Üst Div'leri yeterli yer yok çünkü öyle Demo

Answer 3

olduğunu. 10px'e ayarlamayı denedim ve tamamlandı.

Answer 4

#jcart içinde css koduna float:left ekleyin:

#jcart { 
position:relative; 
float:left 
font-size:1.15em; 
top:0; 
margin:0 0 .75em; 
}