HTML / CSS: दो फ्लोटिंग डिव को एक ही ऊँचाई पर बनाना


106

मेरे पास थोड़ी अजीब समस्या है जिसे मैं वर्तमान में एक का उपयोग करके हल करता हूं table, नीचे देखें। मूल रूप से, मैं चाहता हूं कि दो डिवीजनों के पास उपलब्ध चौड़ाई का 100% हिस्सा हो, लेकिन केवल उतनी ही ऊर्ध्वाधर जगह लें जितनी कि (जो वास्तव में तस्वीर से स्पष्ट नहीं है)। जैसा कि दिखाया गया है, दोनों को हर समय थोड़ी सी रेखा के साथ समान ऊंचाई चाहिए।

वैकल्पिक शब्द
(स्रोत: pici.se )

यह उपयोग करना बहुत आसान है table, जो मैं वर्तमान में कर रहा हूं। हालाँकि, मैं समाधान के लिए उत्सुक नहीं हूँ, क्योंकि शब्दार्थ यह वास्तव में एक तालिका नहीं है।


2
एर ... चित्र कहाँ है? मुझे पता है कि मुझे इस पर टिप्पणी करने में बहुत देर हो गई है
अजय कुलकर्णी

जवाबों:


160

आप सीएसएस में समान ऊंचाई के कॉलम प्राप्त कर सकते हैं, एक बड़ी राशि के नीचे पैडिंग, एक ही राशि के नीचे नकारात्मक मार्जिन और एक div के साथ स्तंभों के आसपास जो अतिप्रवाह छिपा हुआ है। पाठ को लंबवत रूप से केंद्रित करना थोड़ा पेचीदा है लेकिन इससे आपको रास्ते में मदद करनी चाहिए।

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

मुझे लगता है कि यह उल्लेख के लायक है स्ट्रीटपैक के पिछले उत्तर में HTML अमान्य है, सिद्धांत XHTML है और विशेषताओं के आसपास एकल उद्धरण हैं। यह भी ध्यान देने योग्य हैclearकंटेनर के आंतरिक फ़्लोट्स को साफ़ करने के लिए आपको एक अतिरिक्त तत्व की आवश्यकता नहीं है । यदि आप ओवरफ़्लो का उपयोग करते हैं, तो यह सभी गैर-IE ब्राउज़रों में फ़्लोट्स को साफ़ करता है और फिर कुछ जोड़ने के लिए कुछ है जैसे कि चौड़ाई या ज़ूम के रूप में: 1 अपने IE को इसकी आंतरिक फ़्लोट को साफ़ करने का कारण बनेगा।

मैंने सभी आधुनिक ब्राउज़रों FF3 + ओपेरा 9 + क्रोम सफारी 3+ और IE6 / 7/8 में इसका परीक्षण किया है। यह एक बदसूरत चाल की तरह लग सकता है लेकिन यह अच्छी तरह से काम करता है और मैं इसे उत्पादन में बहुत उपयोग करता हूं।

आशा है कि ये आपकी मदद करेगा।


1
कोड मैंने W3C के सत्यापनकर्ता पर मान्य किया (ठीक है, एक बार जब आप <शीर्षक> तत्व जोड़ते हैं, तो आपकी बात नहीं थी)। इसके अलावा, विनिर्देश इस चर्चा के अनुसार एकल उद्धरणों के उपयोग की अनुमति देते हैं: sitepoint.com/forums/showthread.php?t=54273#6
उदाहरणार्थ मुझे

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

2
वास्तव में जबकि केविन सी द्वारा दिए गए समाधान में छाया के बारे में शीर्ष, बाएं और दाएं पैडिंग के लिए काम किया जा रहा है, यह नीचे के लिए काम नहीं करता है। अब तक एक समाधान नहीं मिला है।
जीनमर्ट्ज़

1
अच्छा काम नताली। @laarsk अप्रत्याशित ऊंचाई वास्तव में यह क्या है के लिए यह नहीं है? डेमो देखें: jsfiddle.net/RT3MT/4 "लंबे" पैराग्राफ को देखने के लिए चारों ओर
घुमाएँ

1
यह मेरे द्वारा देखे गए सबसे बदसूरत सीएसएस हैक्स में से एक है, लेकिन मैं इसे खुले हाथों से गले लगाने जा रहा हूं। यह आगे बढ़ने का एकमात्र तरीका प्रतीत होता है
मैट वूकस

98

यह वर्ष 2012 + n है, इसलिए यदि आप IE6 / 7 की परवाह नहीं करते हैं display:table, display:table-rowऔर display:table-cellसभी आधुनिक ब्राउज़रों में काम करते हैं:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

अद्यतन 2016-06-17: यदि आपको लगता है कि समय आ गया है display:flex, तो Flexbox Froggy देखें


30
यह उत्तर किस वर्ष दिया जाएगा display: flex?
लैंडोनश्रोप

12
नहीं, हम अब 2014 में हैं (;
फ्रांसिस्को प्रेसेनिया

9
आआआआआआआआआआआआँ, यह 2015 है शायद साल के अंत तक हम प्रदर्शित करने के लिए उत्तर बदल सकते हैं: फ्लेक्स :)
मेटलवर्डीओ

5
मैं अभी भी 1950 के दशक में रह रहा हूं।
Jay

1
2016 से नमस्कार! अब हम फ्लेक्स का उपयोग कर सकते हैं
ब्रेट ग्रेगोन

20

इसे प्राप्त करने के लिए आपको फ्लेक्सबॉक्स का उपयोग करना चाहिए। यह IE8 और IE9 में समर्थित नहीं है और केवल IE10 में प्री-उपसर्ग के साथ है, लेकिन अन्य सभी ब्राउज़र इसका समर्थन करते हैं। विक्रेता उपसर्गों के लिए, आपको ऑटोप्रिफ़र का भी उपयोग करना चाहिए ।

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

1
मेरे पास फ्लेक्स के साथ समस्या यह है कि इसे कॉलम के चारों ओर एक आवरण की आवश्यकता है। फ़्लोट्स + डिस्प्ले: टेबल तकनीक I में एक हेडर और कॉलम का एक गुच्छा हो सकता है और हेडर को प्रभावित किए बिना कॉलम पर प्रभाव काम करता है।
स्टिजन डे विट

10

आप इस js के साथ काम कर सकते हैं:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

1
कृपया ध्यान दें कि यह प्रश्न पहले से ही काफी पुराना है और बेहतर समाधान (जावास्क्रिप्ट की आवश्यकता के बिना) पहले ही प्रदान किए जा चुके हैं।
नीरजुल

1
मुझे वास्तव में यह समाधान पसंद है। यह मजेदार है और दिखाता है कि आप न केवल अपने html को css के साथ जोड़-तोड़ कर सकते हैं, बल्कि आप इसे jquery की मदद से भी कर सकते हैं
csichar

6
यदि कॉलम की ऊंचाई बदल जाती है तो यह समाधान काम नहीं करेगा। यदि स्तंभों की सामग्री बदली जाती है, तो ऐसा हो सकता है। इस फ़ंक्शन को चलाने की आवश्यकता होगी: सामग्री परिवर्तन और .on ब्राउज़र आकार पर। सीएसएस दृष्टिकोण अधिक आदर्श है क्योंकि यह इन चिंताओं से बचता है
एलेक्स्रिडन

5

यह CSS में एक क्लासिक समस्या है। वास्तव में इसके लिए कोई समाधान नहीं है।

ए लिस्ट शिवाय का यह लेख इस समस्या पर एक अच्छा पढ़ा गया है। यह "फाक्स कॉलम" नामक एक तकनीक का उपयोग करता है, जो समान लंबाई वाले स्तंभों का भ्रम पैदा करने वाले स्तंभों पर एक खड़ी टाइल वाली पृष्ठभूमि छवि के आधार पर होता है। चूंकि यह फ्लोटेड तत्वों के आवरण पर है, इसलिए यह सबसे लंबा तत्व है।


इस सूची के संपादकों के लेख पर यह नोट है:

संपादकों का एक नोट: अपने समय के लिए उत्कृष्ट, यह लेख आधुनिक सर्वोत्तम प्रथाओं को प्रतिबिंबित नहीं कर सकता है।

तकनीक को पूरी तरह से स्थिर चौड़ाई के डिजाइन की आवश्यकता होती है जो तरल लेआउट और उत्तरदायी डिजाइन तकनीकों के साथ अच्छी तरह से काम नहीं करता है जो आज क्रॉस-डिवाइस साइटों के लिए लोकप्रिय हैं। स्थैतिक चौड़ाई साइटों के लिए, हालांकि, यह एक विश्वसनीय विकल्प है।


धन्यवाद, यह एक अच्छा हैक की तरह लगता है। हालांकि, मैं यह उल्लेख करना भूल गया कि सही कॉलम में पाठ होना चाहिए, खड़ी केंद्रित। क्या मुझे विश्वास है कि अशुद्ध कॉलम ऐसा नहीं कर सकते?
डेनिज़ डोगन

4

मेरे पास भी ऐसी ही समस्या थी और मेरी राय में सबसे अच्छा विकल्प सिर्फ जावास्क्रिप्ट या jquery का थोड़ा सा उपयोग करना है।

आप चाहते हैं कि div div को सर्वोच्च div value प्राप्त करके समान ऊँचाई हो और उस मान को अन्य सभी divs पर लागू किया जा सके। यदि आपके पास कई divs हैं और कई समाधान हैं, तो मुझे पता लगाने के लिए थोड़ा अग्रिम js कोड लिखने का सुझाव है कि सभी divs में से कौन सा उच्चतम है और फिर इसका उपयोग करें।

Jquery और 2 divs के साथ यह बहुत सरल है, यहाँ उदाहरण कोड है:

$('.smaller-div').css('height',$('.higher-div').css('height'));

और अंत के लिए, 1 आखिरी बात है। उनकी गद्दी (ऊपर और नीचे) समान होनी चाहिए! यदि किसी के पास बड़ा पैडिंग है तो आपको पैडिंग अंतर को खत्म करना होगा।


1

जहाँ तक मुझे पता है, आप CSS के वर्तमान कार्यान्वयन का उपयोग करके ऐसा नहीं कर सकते। दो कॉलम बनाने के लिए, समान ऊंचाई-एड आपको जेएस की आवश्यकता है।


1

यह IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows) में मेरे लिए काम करता है।

IE 6 में भी काम करता है यदि आप निचले भाग में क्लियर डिव को अनफॉलो करते हैं। संपादित करें : के रूप में नेटली Downe ने कहा, आप बस जोड़ सकते हैं width: 100%;करने के लिए #containerके बजाय।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

अगर सही निश्चित ऊंचाई नहीं है, तो मुझे सही div में टेक्स्ट को वर्टिकल सेंटर करने का CSS तरीका नहीं पता है। यदि यह है, तो आप line-heightdiv ऊँचाई के समान मान सेट कर सकते हैं और अपने पाठ वाले आंतरिक div को लगा सकते हैं display: inline; line-height: 110%


1

जावास्क्रिप्ट का उपयोग करके, आप दो डिव टैग को एक ही ऊंचाई पर बना सकते हैं। नीचे दिखाया गया कोड का उपयोग करके छोटी div एक ही ऊँचाई के बराबर होगी, जो सबसे लंबा div टैग है:

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

"लेफ्ट" और "राइट" के साथ आईडी टैग का आईडी है।


1

सीएसएस संपत्ति का उपयोग करके -> प्रदर्शन: टेबल-सेल

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>


0

जेएस का उपयोग करना, data-same-height="group_name"उन सभी तत्वों का उपयोग करें जिन्हें आप समान ऊंचाई चाहते हैं

उदाहरण: https://jsfiddle.net/eoom2b82/

कोड:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

0

मुझे कुछ ऐसा ही करने की आवश्यकता थी, यहाँ मेरा कार्यान्वयन है। उद्देश्य को पुनः प्राप्त करने के लिए, 2 तत्वों को किसी दिए गए जनक कंटेनर की चौड़ाई लेना है, और ऊँचाई केवल उतनी ही होनी चाहिए जितनी उसकी होनी चाहिए। आवश्यक रूप से सामग्री की सबसे बड़ी मात्रा की अधिकतम ऊंचाई के बराबर ऊंचाई, लेकिन दूसरे कंटेनर में फ्लश होना।

एचटीएमएल

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

सीएसएस

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

0

कई साल पहले, floatसंपत्ति के साथ इस समस्या का समाधान करने के लिए इस्तेमाल tableका उपयोग कर दृष्टिकोण display: table;और display: table-row;औरdisplay: table-cell;

लेकिन अब फ्लेक्स प्रॉपर्टी के साथ, आप इसे कोड की 3 लाइनों के साथ हल कर सकते हैं: display: flex;और flex-wrap: wrap;औरflex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%flexहमारे द्वारा दिए गए मूल्य flex-grow flex-shrink flex-basisक्रमशः हैं : व्यक्तिगत रूप से टाइपिंग से बचने के लिए फ्लेक्सबॉक्स में यह अपेक्षाकृत नया शॉर्टकट है। मुझे उम्मीद है कि इससे किसी को मदद मिलेगी

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.