फ्लोट होने पर div को अधिकतम चौड़ाई में विस्तारित करें: बाईं ओर सेट किया गया है

115

मेरे पास कुछ ऐसा है:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

दोनों तैरने वाले नेकदिल हैं। मैं सामग्री डिव को पूरे स्क्रीन को मेनू के लिए उन 100px से भरना चाहता हूं। अगर मैं फ्लोट का उपयोग नहीं करता हूं तो डिव का विस्तार ठीक उसी तरह से होना चाहिए जैसा कि होना चाहिए। लेकिन फ्लोट सेट होने पर मैं इसे कैसे सेट करूं? अगर मैं जैसे sth का उपयोग करता हूं

style=width:100%

तब कंटेंट डिव को माता-पिता का आकार मिलता है, जो या तो बॉडी है या एक और डिव है जिसे मैंने भी आजमाया है, और निश्चित रूप से यह मेनू के दाईं ओर फिट नहीं है और फिर नीचे दिखाया गया है।

html  width 
— फ़्लो
स्रोत

जवाबों:

138

आशा है कि मैंने आपको सही ढंग से समझा है, इस पर एक नज़र डालें: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
स्निपेट का विस्तार करें

— merkuro
स्रोत
5
प्रश्न में कहा गया है कि "दोनों फ़्लोट्स नेक्सेसरी हैं"।
— वर्धमान ताजा
8
हां, आप सही हैं और मैं सहमत हूं। हालाँकि मुझे लगता है कि फ़्लो ने केवल इस बात का उल्लेख किया है, क्योंकि उन्हें लगता है कि वे दोनों हैं! वांछित लेआउट प्राप्त करने की आवश्यकता है और इसलिए मेरा वैकल्पिक समाधान है।
— मर्कुरो
@merkuro: अच्छी बात है। मैं सहमत हूं, "।" सही वांछित प्रभाव प्राप्त करने के लिए तैरने की आवश्यकता नहीं है। @ फ़्लो: क्या आप पुष्टि कर सकते हैं कि क्या कंटेंट डिव को फ़्लोट किया जाना चाहिए? अन्य कारणों से पसंद है?
— क्रिसेंट फ्रेश
काम हो सकता है मैं उसके साथ थोड़ा सा प्रयास करूंगा, आपको वह कारण सही लगा, और फ्लोट अच्छा है, लेकिन मुझे लगता है कि यह काम नहीं करेगा
— फ़्लो
2
आह हाँ और मैं फिर से इसका कारण देखता हूं कि मैंने इसे फ्लोट में क्यों बदला: Ie7 और फ़ायरफ़ॉक्स ठीक करते हैं, लेकिन 5.5 और यानी 6 को बाईं ओर के दाहिने किनारे पर मार्जिन शुरू करते हैं, इसलिए इसमें 236px (वास्तविक चौड़ाई, 100) है दोनों divs के बीच एक उदाहरण) अंतर था
— फ़्लो
100

सबसे अधिक क्रॉस-संगत तरीका जो मैंने ऐसा करने के लिए पाया है वह बहुत स्पष्ट नहीं है। आपको दूसरे कॉलम से फ्लोट को हटाने की जरूरत है, और overflow:hiddenइसे लागू करें। हालाँकि यह किसी भी सामग्री को छिपाता हुआ प्रतीत होता है जो div के बाहर जाता है, यह वास्तव में div को उसके माता-पिता के भीतर रहने के लिए मजबूर करता है।

अपने कोड का उपयोग करना, यह एक उदाहरण है कि यह कैसे किया जा सकता है:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

आशा है कि यह इस समस्या वाले किसी भी व्यक्ति के लिए उपयोगी है, यह वही है जो मैंने पाया है कि मैं जिस साइट का निर्माण कर रहा था, उसके लिए सबसे अच्छा काम करता है, इसे अन्य प्रस्तावों के साथ समायोजित करने की कोशिश करता है। दुर्भाग्य से, यह काम नहीं करता है यदि आप divसामग्री के बाद भी एक सही-फ़्लोटेड शामिल करते हैं , अगर किसी को यह जानने का एक अच्छा तरीका है कि काम करने के लिए, अच्छा IE संगतता के साथ, मुझे यह सुनकर बहुत खुशी होगी।

नया, बेहतर विकल्प display: flex;

अब जबकि फ्लेक्सबॉक्स मॉडल काफी व्यापक रूप से लागू हो गया है, मैं वास्तव में इसके बजाय इसका उपयोग करने की सलाह flexदूंगा , क्योंकि यह लेआउट के साथ बहुत अधिक प्राथमिकता देता है । यहाँ मूल की तरह एक साधारण दो-कॉलम है:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

और यहाँ एक लचीली-चौड़ाई वाले केंद्र स्तंभ के साथ तीन-स्तंभ है!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
— alanaktion
स्रोत
कुछ और परीक्षण के बाद, ऐसा प्रतीत होता है कि आपको IE 6 में काम करने के लिए "स्थिति: सापेक्ष" के साथ हैलेआउट को ट्रिगर करने की आवश्यकता नहीं है, मैं IE 5 के बारे में निश्चित नहीं हूं, लेकिन यह आम तौर पर वैसे भी इसे शामिल करने के लिए कोई समस्या नहीं है। सुरक्षित रहने के लिए।
— अलान्केशन
1
यह उत्तर अप्राप्य लगता है, लेकिन यह जानना वास्तव में अच्छा है। यह आपको फ्लोट करने देता है, यहां तक ​​कि div के अंदर एक फ्लोटिंग तत्व के साथ। Ia google "ब्लॉक फॉरमेटिंग संदर्भ।" अभी।
— कार्लोस गिल
सबसे अच्छा तरीका सीएसएस
— नॉट
@ मेरा इसके लिए CSS का उपयोग करने की आवश्यकता है क्योंकि मेरा डिज़ाइन उत्तरदायी है। अलग-अलग स्क्रीन साइज के लिए अलग-अलग लेआउट की जरूरत होती है, इसलिए टेबल पर काम नहीं होता। इसके अलावा, यह विधि मूल रूप से किसी भी ब्राउज़र का उपयोग करने के लिए काम करती है जो अभी भी उपयोग करता है।
— alanaktion
1
@MarcoDemaio, मेरा कहना यह था कि स्क्रीन के आकार पर जहां छोटा स्थिर स्तंभ मुख्य स्तंभ के रूप में बड़ा होगा, जैसे कि मोबाइल डिवाइस पर, मैं चाहता था कि दो कॉलम पूर्ण-चौड़ाई वाली पंक्तियां बनें, जो नहीं किया जा सका जब तक मैं वास्तव में जावास्क्रिप्ट के साथ सामग्री को स्थानांतरित नहीं करना चाहता तब तक तालिकाओं के साथ।
— अलान्केशन
31

अपने मार्जिन पर आकार को ठीक किए बिना समाधान

.content .right{
    overflow: auto; 
    background-color: red;
}

मर्कुरो के लिए +1, लेकिन अगर फ्लोट का आकार बदलता है तो आपका निश्चित मार्जिन विफल हो जाएगा। यदि आप दाईं ओर CSS के ऊपर उपयोग करते हैं तो divयह बाईं ओर के फ्लोट पर आकार बदलने के साथ अच्छी तरह से बदल जाएगा। यह थोड़ा और अधिक लचीला जैसा है। यहां पर फिडेल की जांच करें: http://jsfiddle.net/9ZHBK/144/

— विल्ट
स्रोत
2
@alanaktion मैं अनावश्यक ऑटो को दूर ले गया। अंतर अतिप्रवाह मूल्य में है। स्पष्ट रूप से overflow: hiddenऔर overflow autoएक ही व्यवहार में परिणाम। मुझे भी लगता है कि लोग फिदेल की सराहना करते हैं।
— विल्ट
यदि कोई जानना चाहता है कि यह काम क्यों करता है, तो यहां देखें: stackoverflow.com/a/1767270/2756409
— टायलरएच
मुझे लगता है कि यह मर्कुरो के समाधान से बेहतर है।
— स्क्यूरजेड
6

फ़्लोट किए गए तत्व सामान्य प्रवाह लेआउट से बाहर ले जाए जाते हैं, और ब्लॉक तत्व, जैसे कि DIV, अब अपने माता-पिता की चौड़ाई का विस्तार नहीं करते हैं। इस स्थिति में नियम बदलते हैं। पहिया को फिर से मजबूत करने के बजाय, दो कॉलम लेआउट बनाने के लिए कुछ संभावित समाधानों के लिए इस साइट को देखें : http://www.maxdesign.com.au/pretation/page_layouts/

विशेष रूप से, "तरल दो-स्तंभ लेआउट"।

चीयर्स!

— सीन ऐटकेन
स्रोत
4

यह HTML 5 के लिए एक अद्यतन समाधान है अगर किसी को दिलचस्पी है और "फ्लोटिंग" के शौकीन नहीं हैं।

टेबल इस मामले में बहुत अच्छा काम करती है क्योंकि आप टेबल और टेबल-सेल की निश्चित चौड़ाई निर्धारित कर सकते हैं। 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ मूल स्रोत कोड @merkuro से

— Snowie
स्रोत
+1 अंत में निश्चित चौड़ाई तत्व के साथ कुछ काम करता है, भले ही वह तकनीकी रूप से फ्लोट का उपयोग न करता हो।
— कार्तिक टी
+1 तो पूरी तरह से हाँ। फ्लोट्स और पोजीशन और टेबल के साथ संघर्ष करने के वर्षों के बाद, यह सही समाधान है। स्वीकृत समाधान असुरक्षित सीएसएस का प्रचार करता है।
— राशिफल
4

यह उपयोग आपकी समस्या को हल कर सकता है।

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
स्निपेट का विस्तार करें

— suathd
स्रोत
एसओ में आपका स्वागत है। क्या आप इस बारे में स्पष्टीकरण जोड़ सकते हैं कि यह कैसे काम करता है?
— yacc
3

और merkuroयदि आप बाईं ओर अधिकतम को अधिकतम करना चाहते हैं, तो आपको इसका उपयोग करना चाहिए:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

IE पर परीक्षण नहीं किया गया है, इसलिए यह IE पर टूटी हुई दिख सकती है।

— kubilayeksioglu
स्रोत
1

स्वीकृत उत्तर काम कर सकता है, लेकिन मुझे मार्जिन को ओवरलैप करने का विचार पसंद नहीं है। HTML5 में, आप ऐसा करेंगे display: flex;। यह एक साफ समाधान है। बस एक तत्व के flex-grow: 1;लिए और गतिशील तत्व के लिए चौड़ाई निर्धारित करें । मेरुक्रोस फ़िडल का संपादित संस्करण: https://jsfiddle.net/EAEKc/1499/

— क्रिस्टोफ बुहलर
स्रोत
0

नमस्ते, सही तत्व पर अतिप्रवाह छिपी विधि के साथ एक आसान तरीका है।

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
स्निपेट का विस्तार करें

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