2 divs तरफ गठबंधन पक्ष, सही div कैसे चौड़ाई चौड़ाई 100% बनाने के लिए?

Question

मैं सोच रहा हूँ क्या कर यह है के बारे में जाने के लिए सबसे अच्छा तरीका है ...

मैं 3 div रों है: width=100%; कि 2 आंतरिक div रों

रखती है साथ

• एक div#container

  width गतिशील रूप से बदल रहा है, लेकिन 200px से अधिक व्यापक नहीं है (उत्पाद छवि धारण करेगा)

• एक div#inner_right जहां चौड़ाई और

  #container { 
      width:100% 
  } 
  
  #inner_left { 
      display:inline-block: 
      max-width:200px; 
  } 
  
  #inner_right { 
      display:inline-block; 
      width:100%; 
  } 
  

समस्या यह है कि div#inner_right एक लाइन ब्रेक बनाता है (नहीं दिखाया गया उत्पाद का वर्णन करने के लिए पाठ में शामिल होंगे) कंटेनर में अंतरिक्ष के बाकी भरना चाहिए पूरे भरता है चौड़ाई। div बाएं div (जो गतिशील रूप से बदलता है) द्वारा की गई चौड़ाई के लिए दाएं div लेखांकन के साथ मैं उन्हें एक-दूसरे के आगे संरेखित कैसे कर सकता हूं? मुझे यह अन्य तरीकों से काम करने के लिए मिला है, लेकिन मैं एक साफ समाधान की तलाश में हूं ...

सीएसएस नोब के लिए कोई मदद बहुत सराहना की है!

Answer 1

"liquid layouts" पर एक नज़र डालें यह वर्णन कर सकते हैं कि तुम क्या बारे में बात कर रहे हैं।

शायद आप this one देख रहे हैं।

अपने उदाहरण में, अपना प्रदर्शन इनलाइन पर सेट करने का प्रयास करें। हालांकि, आप तकनीकी रूप से ब्लॉक स्तर तत्वों का उपयोग करने में सक्षम नहीं होंगे, इसलिए ऊपर दिए गए लिंक पर एक नज़र डालें। :)

यदि आप फ्लोट्स का उपयोग कर रहे हैं तो चौड़ाई को 100% सेट करने में समस्या यह है कि इसे कंटेनर का 100% माना जाता है, इसलिए यह 100% बाएं div की चौड़ाई को शामिल करने के बाद से काम नहीं करेगा।

संपादित: Here अन्य जवाब का उदाहरण है, मैं सादगी की खातिर ऊपर के उदाहरण साइट से HTML/CSS शामिल करने के लिए यह संपादित किया है।

मैं भी नीचे शामिल कर लेंगे:

एचटीएमएल

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"><b>Content Column: <em>Fluid</em></b></div> 
    </div> 
</div> 
<div id="leftcolumn"> 
    <div class="innertube"><b>Left Column: <em>200px</em></b></div> 
</div> 

सीएसएस

#contentwrapper{ 
float: left; 
width: 100%; 
} 

#contentcolumn{ 
margin-left: 200px; /*Set left margin to LeftColumnWidth*/ 
} 

#leftcolumn{ 
float: left; 
width: 200px; /*Width of left column*/ 
margin-left: -100%; 
background: #C8FC98; 
} 

Answer 2

चल उपयोग:

#container{ 
width:100% 
} 

#inner_left{ 
float:left; 
max-width:200px; 
} 

#inner_right{ 
float:left; 
width:100%; 
} 

संपादित करें: एक एक इस पढ़ा है, यह एक अच्छी छोटी मार्गदर्शिका दी गई है: quirksmode

Answer 3

आप स्थिति प्रदान करने की आवश्यकता: दोनों अपने div के

को पूर्ण शैली की संपत्ति

Answer 4

तो भले ही मैं इसे केवल सीएसएस के साथ करना चाहता था, मैं केवल टेबल का उपयोग कर समाप्त हुआ ...

Answer 5

मैंने वास्तव में यहां जवाबों में एक अच्छा समाधान नहीं देखा है। तो मैं अपना हिस्सा साझा करूंगा।

ऐसा करने का सबसे अच्छा तरीका सीएसएस में table-cell विकल्प का उपयोग कर है। जोड़ने के लिए एक महत्वपूर्ण बात तत्व के लिए 'न्यूनतम-चौड़ाई' है जिसमें पिक्सेल चौड़ाई है।

उदाहरण:

<div id="left"> 
    Left 
</div> 
<div id="right"> 
    right 
</div> 

सीएसएस:

#left { 
    display: table-cell; 
    min-width: 160px; 
} 
#right { 
    display: table-cell; 
    width: 100%; 
    vertical-align: top; 
} 

Answer 6

यह @ w00 के जवाब पर आधारित है। +1 दोस्त

मेरी स्थिति तब थी जब मैं किसी लेबल के बगल में कुछ आइकन दिखाना चाहता था। मैं उस तरल पदार्थ का उपयोग करता हूं जिसके लिए अब्रैप आता है। ऐसा इसलिए है कि आइकन एक ही पंक्ति पर दिखाई देते हैं।

.sidebyside-left-fixed, .sidebyside-right-fixed 
{ 
    display: table-cell; 
    width: 100%; 
} 

.sidebyside-left-fluid , .sidebyside-right-fluid 
{ 
    display: table-cell; 
    vertical-align: top; 
    white-space: nowrap; 
} 

Answer 7

यह फ्लेक्स बॉक्स है, जो CSS3 के साथ शुरू किया गया है और Can I use के अनुसार क्रॉस-ब्राउज़र का उपयोग कर पूरा किया जा सकता।

.container { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    width: 100px; /* or leave it undefined */ 
 
} 
 

 
.right { 
 
    flex-grow: 1; 
 
} 
 

 
/* some styling */ 
 
.container {height: 90vh} 
 
.left {background: gray} 
 
.right {background: red}

<div class="container"> 
 

 
    <div class="left">100px</div> 
 
    <div class="right">Rest</div> 
 
    
 
</div>

Answer 8

यहाँ एक आसान विधि इस लक्ष्य को हासिल करने के लिए है, और यह कुछ ऐसा है जो काफी अक्सर काफ़ी हो। यह सभी पुराने ब्राउज़र सहित सभी ब्राउज़रों के साथ काम करने के लिए भी परीक्षण किया जाता है (मुझे बताएं कि यह किसी पर नहीं है)। एक नमूना करने के लिए

लिंक:

<div class="wrapper"> 
    <div class="left"> 
     Left Box 
    </div> 

    <div class="right"> 
     Right Box 
    </div> 

</div> 

और इसी एससीएसएस:

.wrapper { 
    position: relative; 
} 

$left_width: 200px; 
.left { 
    position: absolute; 
    left: 0px; 
    width: $left_width; 
} 
.right { 
    margin-left: $left_width; 
} 

आप किसी भी सीएसएस preprocessors उपयोग नहीं कर रहे हैं, तो की जगह https://jsfiddle.net/collinsethans/jdgduw6a/

यहाँ एचटीएमएल हिस्सा है आपके मूल्य के साथ $ left_width (यहां 200px)।

क्रेडिट: यह http://htmldog.com/examples/pagelayout2/ पर आधारित है। वहां कई अन्य उपयोगी हैं।