एक div को दो स्तंभों में विभाजित करने के तरीके के रूप में कैसे एक तालिका विभाजित करते हैं?

Question

मैं वास्तव में एक div में दो ग्रिड चाहता था, मेरा मतलब है कि एक ग्रिड दाहिने तरफ, दूसरी तरफ बाएं ..... लेकिन अब के लिए ग्रिड नीचे दिखाई दे रहा है। जैसा कि आप दो पंक्तियों के साथ एक टेबल में विभाजित हैं! वही है कि मुझे एक div विभाजित करने और पक्ष के साथ दो ग्रिड जोड़ने की जरूरत है। आशा है कि आप मेरा मुद्दा प्राप्त करें। आपके भयानक समर्थन के लिए अग्रिम धन्यवाद और जवाब

Answer 1

आपका मुख्य div

<div id="main"> 
<div id="left"></div> 
<div id="right"></div> 
</div> 

सीएसएस के साथ

अंदर दो divs बनाएँ, सही पक्ष

#left { float:left } 
#right { float:right } 

Answer 2

यह सब उस तालिका पर निर्भर करता है जिसे आप उस तालिका के लिए प्राप्त करना चाहते हैं। कई दृष्टिकोण हैं, उनमें से प्रत्येक थोड़ा अलग परिणाम प्रदान करते हैं।

1. आप divs पर display सीएसएस संपत्ति बदल सकते हैं। उपयोग करने का सबसे अच्छा मूल्य table-cell होगा; हालांकि, यह मान IE के किसी भी संस्करण द्वारा समर्थित नहीं है। आप inline या inline-block मानों का भी प्रयास कर सकते हैं।
2. आप अपने कंटेनर में बाईं ओर divs को तैर ​​सकते हैं।
3. आप अपने कंटेनर में divs की पूर्ण या सापेक्ष स्थिति का उपयोग कर सकते हैं; हालांकि, यह दृष्टिकोण तरल पदार्थ डिजाइन के साथ अच्छी तरह से काम नहीं करता है।
4. आप span पर स्विच कर सकते हैं।

Answer 3

एक तालिका का उपयोग करने के लिए हर एक को ठीक करें। यह टेबल का उपयोग करने के लिए और अधिक समझ में आता है जहां वे अधिक कुशल हैं। इस तरह की चीजें टेबल के लिए बनाई जाती हैं, और div के लिए नहीं बनाया जाता है।

Answer 4

यह उमर अबीद के स्वीकृत उत्तर का विस्तार है। मैंने इसके साथ शुरुआत की और आगे संशोधन करना पड़ा ताकि यह बताए गए प्रश्न के मेरे उदाहरण में काम करे।

मैंने इस काम को आईडी के बजाय कक्षा के नामों के साथ बनाया है ताकि मैं एक ही सीएसएस को कई उदाहरणों में कॉल कर सकूं। इसने मुझे दो बराबर आकार की कोशिकाओं को अनुकरण करने की क्षमता दी। मेरे उदाहरण में, मैंने ईएमएस के साथ निश्चित आकार निर्धारित किया है ताकि यह अपनी उपस्थिति को तालिका और डेस्कटॉप ब्राउज़र आकारों (मेरे मोबाइल सीएसएस में, मेरी एक अलग रणनीति हो) को पार कर सके।

बाएं div में एक छवि को संरेखित करने के लिए, मुझे एक अलग ब्लॉक (सीएसएस कोड में अंतिम) बनाना था।

यह ज्यादातर मामलों

में प्रश्न को हल करना चाहिए

<div class="BrandContainer"> 
     <div class="BrandContainerTitle"> 
      <h1>...</h1> 
     </div> 
     <div class="BrandContainerImage"> 
      <img alt="Demo image" src="..." /> 
     </div> 
    </div> 

सीएसएस:

.BrandContainer 
{ 
    width: 22em; 
} 
.BrandContainerTitle 
{ 
    vertical-align: top; 
    float: right; 
    width: 10em; 
} 
.BrandContainerImage 
{ 
    vertical-align: top; 
    float: left; 
} 
.BrandContainerImage img 
{ 
    width: 10em; 
}