कैसे तरफ से दो div align पक्ष बनाने के लिए?

Question

मैं दो divs पक्ष या मूल रूप से खरीदारी की टोकरी और आइटम (अर्थात् jcart और cartbox) से कंधा मिलाकर नाव बनाने के लिए कोशिश कर रहे हैं लेकिन नहीं कर सकते इसे पाने के लिए लग रहे हैं। link

मैं cartbox सीएसएस पर परिवर्तन float:right; कोशिश की, लेकिन यह है कि केवल सही करने के लिए खरीदारी की टोकरी के लिए कदम होगा और अगर मैं cartbox सीएसएस पर नाव को दूर .. गाड़ी और आइटम कंधे से कंधा मिलाकर संरेखित: यहाँ डेमो है लेकिन किसी कारण से कार्ट वास्तव में छोटा प्रतीत होता है और "कार्ट में जोड़ें" बटन क्लिक करने के लिए प्रतीत नहीं होता है। किसी भी तरह की सहायता को आभार समझेंगे!

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> 

सीएसएस:

#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; 
} 

Answer 1

आप तत्वों आप कंधे से कंधा मिलाकर संरेखित करना चाहते हैं पर display: inline-block जोड़ने के लिए, के रूप में div तत्वों की एक डिफ़ॉल्ट शैली है जरूरत display: block, जिसका अर्थ है कि वे खड़ी बजाय क्षैतिज रूप से (व्यवहार नहीं आप चाहते हैं) ढेर होगा।

यह दिखता से; शॉपिंग कार्ट बॉक्स भी सामग्री कंटेनर में तरफ फिट करने के लिए बहुत व्यापक है। आईडी centre के साथ div (संभवतः 960px के बजाय 1000px तक) बनाएं, और display संपत्ति को बदलने के अतिरिक्त के साथ, इसे करना चाहिए।

कोड आप इसे बदलने के लिए प्राप्त करने के लिए सीधे लिखने की ज़रूरत के संदर्भ में, निम्न करें:

#centre { 
    width: 1000px; 
} 

.cartbox { 
    display: inline-block; 
} 

संपादित करें: मैं स्थानीय रूप से अपनी वेबसाइट के लिए इन परिवर्तनों संशोधित और यह काम किया है प्रतीत होता है।

Answer 2

आप इनलाइन या इनलाइन-ब्लॉक करने के लिए प्रदर्शन संपत्ति के रूप में उपयोग कर सकते हैं @Sam होम्स

कहा या आप नाव का उपयोग कर कुछ कर सकते हैं। इस तरह:

.cartbox div{ 
    float:left; 
} 

या

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

यहाँ Demo

Answer 3

है यह इसलिए है क्योंकि आप माता-पिता divs में पर्याप्त स्थान नहीं है। मैं 10px के लिए सेट करने की कोशिश की और यह ठीक allinged।

Answer 4

#jcart में अपने सीएसएस कोड को float:left जोड़ें:

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