सीएसएस

Question

साथ बराबर ऊंचाई तत्वों मैं कई अलग अलग समाधान बराबर ऊंचाई कॉलम या तत्वों अनुकरण करने के लिए के बारे में पढ़ा है, लेकिन उनमें से कोई भी वास्तव में मेरा ध्यान कब्जा कर लिया है क्योंकि वे हैक्स, अविश्वसनीय रूप से जटिल HTML लेआउट या नहीं व्यापक रूप से समर्थित विशेषताओं का उपयोग कर रहे थे।

यहाँ उदाहरण Fiddle है।

मेरा लक्ष्य सुनिश्चित करें कि सभी तत्व एक ही ऊंचाई या, कम से कम, पंक्ति में भाई बहन की अधिकतम ऊंचाई है बनाने के लिए किया जाएगा।

एक पंक्ति 3 तत्वों द्वारा रचित है (इस मामले में, कोई पंक्ति आवरण मौजूद है, लेकिन मैं इस तरह के कंटेनर तत्व जोड़ने के लिए विचार कर सकते हैं)।

वहाँ एक समाधान है कि है:

1. की आवश्यकता नहीं है जे एस
2. doesn't use display: table
3. ऋणात्मक मानों
4. doesn't require exponential uses of divs and float

Answer 1

के साथ साथ विस्तृत गद्दी/मार्जिन का उपयोग नहीं करता आपके द्वारा किए गए प्रतिबंध: नहीं, ऐसा नहीं है।

संपादित करें: क्योंकि आप इस का उल्लेख नहीं था: आप इस के लिए तालिकाओं का उपयोग कर सकते हैं। (90 के दशक में आपका स्वागत है)

Answer 2

आप इसके लिए CSS3 फ्लेक्स संपत्ति का उपयोग कर सकते हैं। इस तरह लिखें:

CSS 

.parent{ 
    display:-moz-box; 
    display:-webkit-box; 
    display:box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width:100%; 
    min-height:200px; 
} 

.parent div{ 
    background:red; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    border:2px solid green; 
} 

एचटीएमएल

<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
</div> 

चेक इस http://jsfiddle.net/VkPmg/2/

Answer 3

आप एक ठीक चौड़ाई लेआउट है, तो आप कर सकते हैं नकली यह पृष्ठभूमि छवि से। सीमाओं का अनुकरण करने वाली एक टाइल छवि पृष्ठभूमि की कल्पना करें, आपको केवल मुख्य कंटेनर में दोहराना होगा।

उदाहरण के लिए यदि आपके पास 400 पीएक्स कंटेनर है जिसमें 3 100 पीएक्स बॉक्स फ्लोटिंग (जैसे आपकी फीडल) है, तो आपको मुख्य कंटेनर में 1x400 छवि दोहराना होगा। इस छवि में बस आपके द्वारा उपयोग किए गए सीमा रंग की तरह अच्छी x स्थिति 1 पिक्सेल देखो पर जोड़ें। और इसे दोहराओ!

इस तकनीक के साथ, आपके बॉक्स में समान ऊंचाई नहीं होगी (वास्तविकता में) लेकिन डिस्प्ले बॉक्स के जैसा दिखता है क्योंकि उच्च बॉक्स कंटेनर को दबाएगा और पृष्ठभूमि दिखाई देगी।