अलग-अलग परियोजनाओं पर प्रत्येक div

Question

के बगल में दो divs क्षैतिज स्थिति दो मैंने एक दूसरे के आगे क्षैतिज दो divs स्थिति के दो अलग-अलग तरीकों को सीखा। क्या एक दूसरे से बेहतर है, या यह सिर्फ व्यक्तिगत स्वाद का मामला है, या शायद कोई केवल शिकायत/शुद्ध भाग्य से काम कर रहा है?

विधि एक:

<div style="border:1px solid red;"> 
    <div style="float:left;"> 
     first 
    </div> 
    <div style="float:left;"> 
     second 
    </div> 
    <div style="clear:both;"> 
</div> 

विधि दो:

<div style="border:1px solid green;"> 
    <div style="display:inline-block;"> 
     first 
    </div> 
    <div style="display:inline-block;"> 
     second 
    </div> 
</div> 

Answer 1

पहले एक अधिक व्यापक रूप से पुराने ब्राउज़र में समर्थित है, लेकिन float आम तौर पर कुछ अजीब व्यवहार (बुरा नहीं, कुछ भी नहीं है कि होगा की ओर जाता है अपने डिजाइन को तोड़ो, बस थोड़ा अप्रत्याशित)।

आप अपने डिजाइन में कुछ तोड़ने के लिए केवल inline-block के साथ क्रैंक करेंगे जब आप जीवन चक्र में बाद में कुछ यादृच्छिक ब्राउज़र की जांच करेंगे।

मैं आमतौर पर float, और केवल float के साथ चिपक जाता हूं।

Answer 2

यदि आप दूसरी विधि का उपयोग कर रहे हैं तो DIV का उपयोग करने में कोई बात नहीं है यदि आप इसे इनलाइन तत्व में बदल रहे हैं। बस SPAN टैग का उपयोग करें।

तो यदि आप ब्लॉक स्तर तत्व/टैग को संरेखित करने का प्रयास कर रहे हैं, तो पहली विधि का उपयोग करें।

Answer 3

फ़्लोट (पहली विधि) का उपयोग करें। क्योंकि इसका समर्थन सभी ब्राउज़र और इसे संभालना आसान है। यहां link आप और अधिक जानें

Answer 4

दोनों मान्य सीएसएस हैं जो दुर्घटना से काम नहीं करते हैं - यह निर्भर करता है कि आपको क्या चाहिए।

float एस का उपयोग करते समय, आपको उन्हें साफ़ करने की आवश्यकता होगी (जैसा कि पोस्ट कोड में); inline-block एस का उपयोग करते समय, यह आवश्यक नहीं है। इसके अलावा, पर inline-block तत्वों को संरेखित करने के लिए आप text-align का उपयोग कर सकते हैं। आपको आवश्यकतानुसार बॉक्स को संरेखित करने के लिए vertical-align संपत्ति का भी उपयोग कर सकते हैं।

जैसा कि अन्य ने कहा, inline-block के साथ कुछ समस्याएं हैं, सबसे विशेष रूप से पुराने आईई ब्लॉक तत्वों पर इसका समर्थन नहीं करते हैं (ध्यान दें कि यह इनलाइन तत्वों पर ठीक काम करता है, जैसे <span>)। आप निम्नलिखित हैक के साथ उस पर काम कर सकते हैं:

.selector { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
}