दिलचस्प पोस्ट
आईओएस पर क्रोम में फेसबुक ओअथ "असमर्थित" स्विफ्ट आईओएस में स्क्रीनशॉट? थ्रेड फेंकने अपवाद बढ़ावा "thread_resource_error: संसाधन अस्थायी रूप से अनुपलब्ध" मैं ActiveRecord में डिफ़ॉल्ट मान कैसे सेट करूं? जवाक के साथ आंतरिक सूर्य वर्गों का उपयोग करना डबल संरेखण यूआरएल में बैक बटन / हैश बदलें का पता लगा रहा है मैं गिट में केवल केस-संवेदक फ़ाइल नाम परिवर्तन कैसे करूं? एंड्रॉइड वेबव्यू में कीबोर्ड के नीचे छिपा हुआ टेक्स्टबॉक्स क्या PHP पीडीओ वक्तव्य पैरामीटर के रूप में तालिका या स्तंभ नाम स्वीकार कर सकता है? नि: शुल्क कैसे मुक्त है पता है कि कैसे? कंसोल से प्रत्येक बाश कमांड के पहले या बाद में कुछ कमान कैसे चलाएँ? क्यों "दशमलव" एक मान्य विशेषता पैरामीटर प्रकार नहीं है? जावा से विंडोज नामित पाइप कैसे खोलें? मटैब में गति-कुशल वर्गीकरण

शेष चौड़ाई लेने के लिए एक div का विस्तार करें

मुझे एक दो-स्तंभ div लेआउट चाहिए, जहां हर एक में चर चौड़ाई हो सकती है

मैं 'दृश्य' div को पूरी तरह से विस्तारित करने के लिए चाहता हूं, क्योंकि 'ट्री' डिवि ने आवश्यक जगह भर दी है। वर्तमान में मेरा 'व्यू' डिवेल को उस सामग्री पर बदल दिया गया है जिसमें यह शामिल है। यह भी अच्छा होगा यदि दोनों दिग्गज पूरी ऊंचाई लेते हैं

डुप्लिकेट अस्वीकरण नहीं:

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

Div के साथ सहायता – शेष चौड़ाई को डिव फिट कर दें क्योंकि मुझे दो कॉलम की आवश्यकता है जो कि बायीं तरफ गठबंधन है

Solutions Collecting From Web of "शेष चौड़ाई लेने के लिए एक div का विस्तार करें"

इसका समाधान वास्तव में बहुत आसान है, लेकिन बिल्कुल स्पष्ट नहीं है आपको "ब्लॉकों स्वरूपण संदर्भ" (बीएफसी) नामक कुछ को ट्रिगर करना होगा, जो विशिष्ट तरीके से फ़्लोट्स के साथ इंटरैक्ट करता है।

बस उस दूसरे डिवा ले, फ्लोट को हटा दें, और इसे overflow:hidden इसके बजाय overflow:hidden दृश्यमान के अलावा कोई अतिप्रवाह मान ब्लॉक बनाता है जिसे वह बीएफसी बनने पर सेट किया गया है। बीएफ़सी, वंश को उनसे बचने की अनुमति नहीं देते हैं, और न ही वे भाई-बहन को उन में घुसने की इजाजत देते हैं। यहां का शुद्ध प्रभाव यह है कि चालू डीआईवी यह काम करेगा, फिर दूसरा डिवा एक साधारण ब्लॉक होगा, जो कि फ्लोट के कब्जे के अलावा सभी उपलब्ध चौड़ाई ले जाएगा।

यह सभी वर्तमान ब्राउज़रों में काम करना चाहिए, हालांकि आपको IE6 और 7 में hasLayout ट्रिगर करना पड़ सकता है। मुझे याद नहीं हो सकता

डेमो:

मैं सिर्फ फ्लेक्स बक्से (प्रदर्शन: फ्लेक्स) के जादू की खोज की। इसे इस्तेमाल करे:

 <style> #box { display: flex; float: left; } #b { flex-grow: 100; border: 1px solid green; } </style> <div id='box'> <div id='a'>Tree</div> <div id='b'>View</div> </div> 

फ्लेक्स बक्से मुझे नियंत्रण देता है, मैंने सीएसएस को 15 साल तक कामना की है। अंत में यहां! अधिक जानकारी: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

यह सीएसएस के साथ करने के लिए तालिकाओं और कठिन (यदि असंभव नहीं है, कम से कम एक क्रॉस-ब्राउज़र अर्थ में) के साथ करने के लिए कुछ ऐसी चीज का एक अच्छा उदाहरण होगा।

यदि दोनों कॉलम चौड़ाई निर्धारित किए गए थे, तो यह आसान होगा।

यदि स्तंभों में से एक को चौड़ाई निर्धारित किया गया था, तो यह थोड़ा कठिन होगा, लेकिन पूरी तरह से संभव है।

दोनों कॉलम चर चौड़ाई के साथ, आईएमएचओ आपको सिर्फ दो-स्तंभ तालिका का उपयोग करना होगा।

इस समाधान को बाहर की जाँच करें

 .container { width: 100%; height: 200px; background-color: green; } .sidebar { float: left; width: 200px; height: 200px; background-color: yellow; } .content { background-color: red; height: 200px; width: auto; margin-left: 200px; } .item { width: 25%; background-color: blue; float: left; color: white; } .clearfix { clear: both; } 
 <div class="container"> <div class="clearfix"></div> <div class="sidebar">width: 200px</div> <div class="content"> <div class="item">25%</div> <div class="item">25%</div> <div class="item">25%</div> <div class="item">25%</div> </div> </div> 

यहाँ, यह मदद कर सकता है …

 <html> <head> <style type="text/css"> div.box { background: #EEE; height: 100px; width: 500px; } div.left { background: #999; float: left; height: 100%; width: auto; } div.right { background: #666; height: 100%; } div.clear { clear: both; height: 1px; overflow: hidden; font-size: 0pt; margin-top: -1px; } </style> </head> <body> <div class="box"> <div class="left">Tree</div> <div class="right">View</div> <div class="clear" /> </div> </body> </html> 

कैल्श का उपयोग करें example`

 .leftSide { float: left; width: 50px; background-color: green; } .rightSide { float: left; width: calc(100% - 50px); background-color: red; } 
 <div style="width:200px"> <div class="leftSide">a</div> <div class="rightSide">b</div> </div> 

मुझे समझ में नहीं आ रहा है कि लोग साधारण कॉलमर लेआउट के लिए शुद्ध-सीएसएस समाधान खोजने के लिए इतने मेहनत करने के लिए तैयार क्यों हैं, जो पुरानी TABLE टैग का उपयोग करते हुए आसान है।

सभी ब्राउज़रों के पास अब भी टेबल लेआउट तर्क है … शायद मुझे डायनासॉर कहते हैं, लेकिन मैं कहता हूं कि यह आपकी सहायता करे।

 <table WIDTH=100% border=0 cellspacing=0 cellpadding=2> <tr> <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> <td bgcolor="#F0F0F0">View</td> </tr> </table> 

फ्लेक्सबॉक्स समाधान

 html, body { height: 100%; } .wrapper { display: flex; height: 100%; } .second { flex-grow: 1; } 
 <div class="wrapper"> <div style="background: #fc9;">Tree</div> <div class="second" style="background: #ccc;">View</div> </div> 
 <html> <head> <style type="text/css"> div.box { background: #EEE; height: 100px; width: 500px; } div.left { background: #999; float: left; height: 100%; width: auto; } div.right { background: #666; height: 100%; } div.clear { clear: both; height: 1px; overflow: hidden; font-size: 0pt; margin-top: -1px; } </style> </head> <body> <div class="box"> <div class="left">Tree</div> <div class="right">View</div> <div class="right">View</div> <div style="width: <=100% getTreeWidth()100 %>">Tree</div> <div class="clear" /> </div> <div class="ColumnWrapper"> <div class="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> </div> </body> </html> 

Simpl.css के प्लग के लिए धन्यवाद!

अपने सभी कॉलम को कॉलम ColumnWrapper में लपेटकर याद रखना चाहिए।

 <div class="ColumnWrapper"> <div class="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> </div> 

मैं Simpl.css संस्करण 1.0 जारी करने के बारे में हूँ ताकि शब्द को फैलाने में मदद करें!

थोड़ा अलग कार्यान्वयन,

दो डिव पैनल (सामग्री + अतिरिक्त), किनारे से, content panel फैलता है यदि extra panel मौजूद नहीं है।

jsfiddle: http://jsfiddle.net/qLTMf/1722/

पॅट – आप सही हैं यही कारण है कि यह समाधान "डायनासोर" और समकालीन दोनों को संतुष्ट करेगा। 🙂

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> .btnCont { display: table-layout; width: 500px; } .txtCont { display: table-cell; width: 70%; max-width: 80%; min-width: 20%; } .subCont { display: table-cell; width: 30%; max-width: 80%; min-width: 20%; } .txtCont .ip { width: 100%; max-width: 100%; min-width: 30% } </style> </head> <body> <div class="btnCont"> <div class="txtCont">Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!</div> <div class="subCont">This column as well as the entire container works like a table. Isn't Amazing!!!</div> </div> </body> </html> 

आप सीएसएस ग्रिड लेआउट की कोशिश कर सकते हैं।

 dl { display: grid; grid-auto-columns: max-content auto; } dt { grid-column: 1; } dd { grid-column: 2; margin: 0; background-color: #ccc; } 
 <dl> <dt>lorem ipsum</dt> <dd>dolor sit amet</dd> <dt>carpe</dt> <dd>diem</dd> </dl> 

मुझे यकीन नहीं है कि यह वह जवाब है जिसे आप उम्मीद कर रहे हैं, लेकिन आप 'व्यू' की चौड़ाई को 'ऑटो' और 100% तक चौड़ाई के लिए क्यों नहीं सेट करते हैं?

अगर आप नवीनतम ब्राउज़र (IE> = 9, FF> = 1 9, क्रोम> = 26, सफारी> = 6) का उपयोग कर रहे हैं और एक ही पंक्ति पर किसी अन्य अनुभाग की चौड़ाई तय की गई है, तो कैल्क फ़ंक्शन का उपयोग करने के बारे में कैसे तय किया जाता है?

 width: calc(100% - 20px) 

20px के बजाय आप एक ही पंक्ति पर किसी अन्य अनुभाग की निश्चित चौड़ाई लिख सकते हैं इस तरह चौड़ाई की गणना की जाएगी और यानी शेष चौड़ाई को लागू किया जाएगा।

ओपेरा के लिए पीएस नहीं समर्थन! 🙁

उपलब्ध सीएसएस लेआउट फ़्रेमवर्क देखें मैं सिम्प या थोड़ा और अधिक जटिल, खाका फ्रेमवर्क की सिफारिश करेगा।

यदि आप सिंपल का उपयोग कर रहे हैं (जिसमें सिर्फ एक सरल सीएसएस फ़ाइल आयात करना शामिल है), तो आप यह कर सकते हैं:

 <div class="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> 

50-50 लेआउट के लिए, या:

 <div class="ColumnOneQuarter">Tree</div> <div class="ColumnThreeQuarters">View</div> 

, एक 25-75 के लिए

यह इत्ना आसान है।

मैंने एक जावास्क्रिप्ट फ़ंक्शन लिखा था जिसे मैं jQuery $ (document) से कॉल करता हूं .ready () यह माता-पिता की सभी बच्चों को पार्स करेगा और सिर्फ सबसे ज्यादा बच्चे को सही ही अद्यतन करेगा।

एचटीएमएल

 ... <div class="stretch"> <div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text </div> <div class="underline" style="display: inline-block;">Some other text </div> </div> .... 

जावास्क्रिप्ट

 $(document).ready(function(){ stretchDivs(); }); function stretchDivs() { // loop thru each <div> that has class='stretch' $("div.stretch").each(function(){ // get the inner width of this <div> that has class='stretch' var totalW = parseInt($(this).css("width")); // loop thru each child node $(this).children().each(function(){ // subtract the margins, borders and padding totalW -= (parseInt($(this).css("margin-left")) + parseInt($(this).css("border-left-width")) + parseInt($(this).css("padding-left")) + parseInt($(this).css("margin-right")) + parseInt($(this).css("border-right-width")) + parseInt($(this).css("padding-right"))); // if this is the last child, we can set its width if ($(this).is(":last-child")) { $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px"); } else { // this is not the last child, so subtract its width too totalW -= parseInt($(this).css("width")); } }); }); } 

आप W3.CSS लाइब्रेरी का उपयोग कर सकते हैं जिसमें ' आराम ' वर्ग शामिल है:

 <!DOCTYPE html> <html> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-row"> <div class="w3-col " style="width:150px"><p>150px</p></div> <div class="w3-rest w3-green"><p>w3-rest</p></div> </div> </body> </html> 

यदि दोनों चौड़ाई वैरिएबल लम्बाई हैं तो आप कुछ स्क्रिप्टिंग या सर्वर साइड के साथ चौड़ाई की गणना क्यों नहीं करते हैं?

<div style="width: <=% getTreeWidth() %>">Tree</div>

 <div style="width: <=% getViewWidth() %>">View</div>