div पैडिंग, मार्जिन?

Question

मैं एक iPhone डेवलपर कुछ बुनियादी सीएसएस गुणों के साथ अटक कर रहा हूँ;) मैं कुछ इस तरह दिखाना चाहते हैं:

यह है कि मैं क्या है:

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29--> 
     <div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29--> 
    </div> 
    <div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29--> 
</div> 

और सीएसएस:

div.cell_3x3_top{ 
    height:20%; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
    margin-bottom: 1px; /*to compensate space between top and content*/ 
    text-align: center; 
    vertical-align: middle; 


} 
div.cell_3x3_type{ 
    width:20%; 
    float:left; 
    background-color: inherit; 
    margin-right: -2px; /*UPDATED:2010/09/29*/ 
} 
div.cell_3x3_title{ 
    width:80%; 
    float:left; 
    background-color: inherit; 
    margin: 0 0 0 0; /* maybe not neccesary*/ 
    padding: 0 0 0 0; /*maybe not neccesary*/ 
    margin-left: -1px; /*UPDATED:2010/09/29 */ 

} 
div.cell_3x3_content{ 
    height:80%; 
    background-color: inherit; 
} 

लेकिन जब मैं उपरोक्त कोड title div के साथ अपनी सामग्री प्रस्तुत करता हूं तो यह बहुत बड़ा लगता है और यह type div के नीचे दिखाई देता है, क्यों क्या यह? type div 20% चौड़ाई है, title 80% चौड़ाई है इसलिए यह बिल्कुल 100% होना चाहिए। क्या कोई मार्जिन या अन्य मीट्रिक मैं यहां भूल रहा हूं? मैंने मार्जिन का उपयोग करके बाईं ओर title div को स्थानांतरित करने का प्रयास किया है लेकिन अभी भी छोटी है। मुझे आश्चर्य है कि तस्वीर की तरह कुछ पाने का सही तरीका क्या है? (नहीं बिल्कुल, क्योंकि यदि आप करीब title div एक छोटा सा कम की तुलना में यह होना चाहिए है। देखें कि के दाएं बॉर्डर content div के साथ गठबंधन नहीं है।)

अग्रिम धन्यवाद।

संपादित करें: 2010/09/28

यह वास्तव में है मैं क्या हासिल करना चाहते:

और इस मैं क्या है:

कोड से ऊपर (एक छोटा सा अद्यतन) अगर मैं divs bordered नहीं होगा काम करेंगे। के बाद से सीमा चौड़ाई 1px मैं क्या जरूरत है type div चौड़ाई से 20% -2px (बाएं सीमा + सही border = 2px) और title div 80% स्थापित करने के लिए है -2px

.rounded_left{ 
    border-top-left-radius: 4px 4px; 
    border-bottom-left-radius: 4px 4px; 

    border-color:gray; 
    border-width: 1px; 
    border-style:solid; 
} 

(.rounded_right समान है)

यह clear:both संपत्ति से संबंधित नहीं है जो मुझे विश्वास है। मैंने कोशिश की और इसका कोई प्रभाव नहीं पड़ा क्योंकि मेरा content div शुरुआत का अच्छा रूप था।

संक्षेप में: मैं अपनी सीमा सहित एक div कैसे बना सकता हूं ताकि हम वास्तव में 20% चौड़ाई कह सकें?

इग्नेसियो

उत्तर:

मुझे एहसास हुआ कि प्रकार और शीर्षक के चारों ओर एक आवरण div क्रमशः समस्या का हल। तो मेरा जवाब इस प्रकार है:

<td class="cell"> 
<div class="cell_3x3_top bordered"> 
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div> 
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div>                </div> 
<div class="cell_3x3_content rounded_left rounded_right">content</div> 
</td> 

मैंने कंटेनर में 20% और 80% सेट किया है और आंतरिक div में सीमाएं हैं।

Answer 1

आप एक समाशोधन div खो रहे हैं। फ़्लोटिंग तत्व .cell_3x3_type div का विस्तार नहीं करते हैं जैसा आप उम्मीद करेंगे।ऐसा करें:

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type">type</div> 
     <div class="cell_3x3_title">title</div> 
     <div class="cell_3x3_clear"></div> 
    </div> 
    <div class="cell_3x3_content">content</div> 
</div> 

सीएसएस:

div.cell_3x3_clear { 
    clear: both; 
} 

बाकी ही रहता है।

संपादित करें:
क्या स्पष्ट संपत्ति है का एक छोटा सा विवरण:

<div id="container" style="border: 1px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
</div> 

http://fii.cz/vksyr

: एक कंटेनर div जिसमें पर विचार केवल तत्वों, इस तरह (स्पष्टता के लिए इनलाइन सीएसएस का उपयोग कर) जारी

कंटेनर की ऊंचाई div 0 है क्योंकि फ़्लोटिंग तत्व दस्तावेज़ प्रवाह से बाहर ले जाते हैं और अब उनके कंटेनर की ऊंचाई को प्रभावित नहीं करते हैं। एक तत्व पर clear: both संपत्ति "को साफ करता है" सभी तैरता है, यानी यह सुनिश्चित करें कि तत्व सब चल तत्वों है कि यह पूर्व में होना नीचे रख दिया गया है बनाता है:

<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
<div style="clear: both; height: 10px; width: 50px; border: 1px solid black;">Cleared</div> 

http://fii.cz/tjdqwac

आप दो उपरोक्त उदाहरण जोड़ देते हैं तो आप कर सकते हैं उस में इसकी ऊंचाई उच्चतम चल तत्व की ऊंचाई के बराबर है करने के लिए कंटेनर div मजबूर:

<div id="container" style="border: 2px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
    <div style="clear: both; height: 0px; border: 1px solid black;"></div> 
</div> 

http://fii.cz/nmpshuh