दो divs, एक निश्चित चौड़ाई, अन्य, बाकी

Question

मुझे दो डिव कंटेनर मिले हैं।

जब तक किसी को एक विशिष्ट चौड़ाई की आवश्यकता होती है, मुझे इसे समायोजित करने की आवश्यकता होती है, ताकि, दूसरा div बाकी जगह उठा ले। क्या कोई और तरीका है इसे करने के लिए?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Comments

प्राचीन ब्राउज़रों के लिए दशक पुराने हैक का उपयोग न करें। आधुनिक फ्लेक्सबॉक्स समाधान के लिए नीचे स्क्रॉल करें।

— एवगेनी

इससे पहले कि आप एवगेनी के लिंक का अनुसरण करें उन ब्राउज़रों पर विचार करें जिन्हें आपके उपयोगकर्ता वास्तव में उपयोग करते हैं, बल्कि उन ब्राउज़र के बजाय जो आप चाहते थे कि उनका उपयोग किया था। फ्लेक्सबॉक्स आपके प्रोफेसर के IE 9: caniuse.com/#feat=flexbox

— duhaime

@duhaime IE9 0.13% वैश्विक उपयोग किया

— एव्जेनी

तो 1000 में से 1 उपयोगकर्ता ...

— duhaime

Answer 1

देखें: http://jsfiddle.net/SpSjL/ (ब्राउज़र की चौड़ाई समायोजित करें)

HTML:

<div class="right"></div>
<div class="left"></div>

सीएसएस:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

आप इसके साथ भी कर सकते हैं display: table, जो आमतौर पर एक बेहतर तरीका है: मैं अपने लेबल के समान इनपुट लाइन कैसे डाल सकता हूं?

Comments

यह मेरे साथ काम नहीं कर रहा है। लेफ्ट 100% चौड़ाई पर है और राइट 250px है। दो लाइनें :(

— भालू

आपको divमेरे उत्तर और मेरे डेमो की तरह, एस के क्रम को स्वैप करना होगा । rightतब left।

— तीसवाँ

कुल मिलाकर यह मेरे लिए काम करता है, लेकिन कभी-कभी जब मेरे पास अगली पंक्ति में लपेटने के बजाय बाएं डिव में पाठ होता है (और वहां जगह होती है) तो यह दाईं ओर काट दिया जाता है (जहां दाहिना भाग शुरू होता है)। मैं लेफ्ट डिव में टेक्स्ट रैप कैसे बना सकता हूं?

— लड़का

फ्लोटिंग नहीं DIV पूरी चौड़ाई भरता है। बुरा विचार जब सामग्री अस्थायी DIV या पाठ से बहुत अधिक है।

— netAction

Answer 2

यह 2017 है और इसे करने का सबसे अच्छा तरीका फ्लेक्सबॉक्स है, जो IE10 + संगत है ।

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

Comments

प्रश्न पर आपकी टिप्पणी ने मुझे IE6 का समर्थन करने की कोशिश करने से बचा लिया। धन्यवाद!

— माइक डेवलैंटेस

यह भी अच्छा है, लेकिन

— आईई

इसने मेरे लिए अच्छा काम किया। परिभाषित करने के लिए .right चौड़ाई की भी आवश्यकता नहीं थी।

— रोटेरेज़

यह मुझे मारता है कि 2017/2018/2019 में हमें अभी भी BE 9. IE के

— बीटवेयर

Answer 3

आप सीएसएस के कैल्क () फ़ंक्शन का उपयोग कर सकते हैं।

डेमो: http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

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

Comments

सलाह के लिए धन्यवाद। मैंने ब्राउज़रों के बीच संगतता की जाँच की, और यह स्थिर उपयोग के लिए उच्च प्रकार का है

— फ़ारसाइड

इसे सर्वश्रेष्ठ उत्तर के रूप में चुना जाना चाहिए, क्योंकि इस उत्तर में DIV टैग को सर्वश्रेष्ठ उत्तर की तरह स्वैप नहीं किया जाता है।

— डॉन दिलंगा

Answer 4

यदि आप स्रोत कोड में आदेश फ्लिप कर सकते हैं, तो आप इसे इस तरह से कर सकते हैं:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

सीएसएस:

.right {
  width: 250px;
  float: right;
}   

एक उदाहरण: http://jsfiddle.net/blineberry/VHcPT/

एक कंटेनर जोड़ें और आप इसे अपने वर्तमान स्रोत कोड ऑर्डर और पूर्ण स्थिति के साथ कर सकते हैं:

HTML:

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

सीएसएस:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

इधर, .leftdiv से एक परोक्ष सेट चौड़ाई हो जाता है top, leftऔर rightशैलियों है कि यह में शेष स्थान को भरने के लिए अनुमति देता है #container।

उदाहरण: http://jsfiddle.net/blineberry/VHcPT/3/

Comments

वास्तविक उदाहरण वास्तव में काम नहीं करता है। JsFiddle में .left div वास्तव में स्क्रीन की पूरी चौड़ाई है। यदि दोनों divs एक ही ऊँचाई के हैं तो बढ़िया है, लेकिन इस स्थिति में .left में केवल 5px पैडिंग जोड़ें और आप देखेंगे।

— user3413723

दूसरा समाधान हालांकि मेरे लिए बहुत अच्छा काम किया। प्रतिभाशाली!

— user3413723

Answer 5

यदि आप उन्हें एक कंटेनर में लपेट सकते हैं, तो आप <div>बाईं ओर <div>लंगर डालने के लिए स्थिति का उपयोग कर सकते हैं left:0;right:250px, यह डेमो देखें । अब मैं कहूंगा कि यह IE6 में काम नहीं करेगा क्योंकि कैन का केवल एक कोना ही <div>पृष्ठ पर पूरी तरह से पोस्ट किया जा सकता है ( पूर्ण विवरण के लिए यहां देखें )।

Answer 6

1 - एक रैपर div है, आप की तरह पैडिंग और मार्जिन सेट
करें 2- बायीं ओर की चौड़ाई को अपनी जरूरत के अनुसार बनाएं और इसे बायीं
ओर घुमाएं 3- बायीं ओर की चौड़ाई के बराबर दायीं ओर का फासला सेट करें

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

उम्मीद है इससे आपका काम बनेगा!

Answer 7

पूरा करने के लिए कुछ तरीके हैं, नकारात्मक मार्जिन मेरे पसंदीदा में से एक है:

http://www.alistapart.com/articles/negativemargins/

सौभाग्य!

Answer 8

अपने अधिकार को विशिष्ट चौड़ाई पर सेट करें और इसे फ्लोट करें, अपने बाईं ओर केवल मार्जिन-राइट को 250px पर सेट करें

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

Comments

प्रदर्शन प्रकार को सही तरीके से मारें और सुनिश्चित करें कि आपके पास कहीं भी एक स्पष्ट सेटिंग नहीं है जो प्रभावित हो रही है। थेफ्ट

— उल्का

क्या आपके पास किसी भी प्रकार का रैपर div है? वहाँ कुछ ऑनलाइन है मैं निरीक्षण कर सकते हैं या यह पूरी तरह से स्थानीय है?

— उल्का

यह पूरी तरह से, स्थानीय है, हालांकि, मुझे इसे jsfiddle पर रखने की कोशिश करें।

— भालू

हाहा, आपने अपना फ्लोट हटा दिया: ठीक है। इसके अलावा, बॉर्डर चौड़ाई का हिसाब रखना न भूलें, इसलिए अगर आप उन डिवाइड्स में से किसी एक में से चौड़ाई को घटाना चाहते हैं।

— उल्का

Answer 9

यदि आपको क्रॉस ब्राउज़र समाधान की आवश्यकता है, तो आप मेरे दृष्टिकोण का उपयोग कर सकते हैं, स्पष्ट और आसान।

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

Answer 10

सरल का उपयोग करें यह आपकी मदद कर सकता है

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>