css - एक्सएचटीएमएल/सीएसएस: आंतरिक div को 100% चौड़ाई घटाकर एक और div चौड़ाई कैसे प्राप्त करें




xhtml html (7)

मेरे पास बाहरी के अंदर 2 नेस्टेड divs हैं, जिनमें चौड़ाई है: 100%। दोनों नेस्टेड divs एक पंक्ति में होना चाहिए और पहले इसे अपनी सामग्री से आकार प्राप्त करना चाहिए:

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner1" style="border:1px; display:inline">
    inner div 1. Some text...
  </div>
  <div id="#inner2" style="width:100%????; border:1px; display:inline">
    inner div 2...
  </div>
</div>

सवाल यह है कि # आंतरिक 2 div को क्षैतिज स्थान प्राप्त करने के लिए कैसे बनाया जाए यदि # आंतरिक 1 div की चौड़ाई निर्दिष्ट नहीं है और यह अंदर क्या है इसके आधार पर निर्भर करता है?

पीएस सभी शैलियों मेरे मामले में अलग-अलग वर्गों में हैं, यहां मैंने सरलीकरण के लिए सीएसएस को शैली विशेषताओं में रखा है।

मैं परिणाम आई 7 + और एफएफ 3.6 में काम करना चाहता हूं

मेरे लिए अधिक जानकारी में ऐसा लगता है:

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

मैं जो चाहता हूं उसकी छवि यहां दी गई है:


@ नासर हजलू के उत्तर पर विस्तार, यह मेरे लिए काम करता है (यहां तक ​​कि आईई 6 में भी)

 <div style="width: 400px; border: solid 1px red;"> 
     <span style="float:left;width: auto;border: solid 1px black;"> 
            hey you 
     </span> 
     <div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div> 
 </div> 

इसे 400 पीएक्स से छोटे मुख्य div के साथ आज़माएं ताकि यह देखने के लिए कि यह कैसे समायोजित होता है। (यह स्पैन के बजाय divs के साथ भी काम करता है - कुंजी चौड़ाई है: पहले div / span में ऑटो ।)


आपकी पहली समस्या यह है कि आप अपने आईडी को '#' से उपसर्ग कर रहे हैं। # केवल उस आईडी के साथ तत्व को संदर्भित करने के लिए सीएसएस में उपयोग किया जाता है, उदाहरण के लिए सीएसएस नियम #उटर {चौड़ाई: 100%} आपके तत्व को संदर्भित करता है:

<div id="outer"></div>

इसके अलावा आपको चौड़ाई के div (या किसी अन्य ब्लॉक तत्व) पर उपयोग करने की आवश्यकता नहीं है जो फ़्लोट नहीं हैं, क्योंकि वे पहले से ही उपलब्ध चौड़ाई का 100% स्वचालित रूप से लेते हैं।

यदि आप एक ही पंक्ति पर 2 डीवी दिखाना चाहते हैं तो आपको बाईं ओर पहली बार तैरना होगा। आसन्न डीआईवी तब तरफ दिखाई देगा, फिर आपको दूसरे तत्व के लिए चौड़ाई को निर्धारित करने की आवश्यकता नहीं है। प्रत्येक div के लिए एक अलग रंगीन सीमा सहित आपका पूरा उदाहरण यहां दिया गया है।

मैंने सीमाओं को बड़ा बना दिया है ताकि आप स्पष्ट रूप से देख सकें कि क्या हो रहा है।

<html><body>
<style type="text/css">
#outer {
    border: solid 5px #c00;
}
#inner1 {
    border: solid 5px #0c0;
    float: left;
    width: 200px;
    height: 300px;
}
#inner2 {
    border: solid 5px #00c;
    height: 300px;
    margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>

<div id="outer">
  <div id="inner1">
    inner div 1. Some text...
  </div>
  <div id="inner2">
    inner div 2...
  </div>
</div>

</body></html>

आपको नेस्टेड तत्व के लिए div का उपयोग करने की आवश्यकता नहीं है, बस इस तरह स्पैन का उपयोग करें

 <div>
     <span style="display:inline-block;width: auto;border: solid 1px black;">
            hey you
     </span>
     <span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
           always use proper tools.
     </span>
 </div>

आपको भीतर के 1 div को बाईं ओर तैरने की आवश्यकता होगी, जैसे:

<div id="#outer" ....>
    <div id='#inner1" style="float:left; border: 1px solid #000;">
        blabla
    </div>
    <div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ...">
        gnihihi
    </div>
</div>

यह काम कर जाना चाहिए। इसकी जांच - पड़ताल करें! अलविदा


एक अन्य समाधान एक जावास्क्रिप्ट चलाने के लिए है जो कैप्शनलाइन क्लास का आकार बदलता है जब दस्तावेज़ इस तरह लोड होता है।
आईई 8 के तहत काम करने के लिए कुछ समय लगा, आईई 7 की कोशिश नहीं की है लेकिन काम करना चाहिए।
ध्यान देने के लिए 2 चीजें।

  1. IE getElementsByClassName का समर्थन नहीं करता है, इसलिए इस फ़ंक्शन को फिर से लिखा गया है।
  2. आईई वस्तुओं का आकार बदलते समय मार्जिन को अलग-अलग प्रबंधित करता है और शैली के साथ स्थानांतरित होता है। मार्जिन लेफ्ट, किसी भी तरह से आईई कक्षा घोषणा में मार्जिन रखने लगता है और इसे नई शैली में जोड़ता है। मार्जिन।
<body onload="resizeCaptionLine()">
<style>
caption {
 border: 1px solid blue;
 padding: 0px;
}
.captionText {
 border: 1px solid red;
 float: left;
}
.captionLine {
 background-color:black;
 margin: 0px;
 margin: 5px 0px 0px 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
</style>

<table style="width:300px;">
<caption width="100%" name="caption1">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

<script type="text/javascript">

function getElementsByClassName(node, class_name) {
  elems = node.all || node.getElementsByTagName('*');
  var arr = new Array();
  for(j = 0; j < elems.length; j++)
  {
    if (elems[j].className == class_name)
       arr[arr.length] = elems[j];
  }
  return arr;
}

function resizeCaptionLine()
{
 var elems = getElementsByClassName(document, 'captionLine');
 for(i = 0; i < elems.length ; i++)
 {
   var parent = elems[i].parentNode;
   var sibling = getElementsByClassName(parent, 'captionText');
   var width = parent.offsetWidth - sibling[0].offsetWidth;

    if(elems[i].currentStyle)
   {
     var currentMargin = elems[i].currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   else if (document.defaultView && document.defaultView.getComputedStyle)
   {
     var currentStyle = document.defaultView.getComputedStyle(elems[i], '');
     var currentMargin = currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
   }
   else
   {
     var currentMargin = elems[i].style.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   elems[i].style.width = (width - margin)+"px";
 } 
}
</script>
</body>

जवाब वास्तव में सरल है! यदि आपने बाईं तरफ div (मेनू) तय किया है, तो निश्चित div float दें: बाएं और अपना दायां लचीला div margin-left जो बड़ा है तो पहले निश्चित div की चौड़ाई है।


रहस्यमय overflow: hidden; आपका दोस्त यहाँ है यह फ्लोट के पीछे विस्तार से तैरने वाले तत्वों को रोकता है - मुझे लगता है कि वह लेआउट है जिसे आप ढूंढ रहे हैं।

यहां कुछ थोड़ा संपादित HTML है: मुझे नहीं लगता कि आपके id में # वर्ण हो सकते हैं:

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

और यहां इच्छित लेआउट प्राप्त करने के लिए सीएसएस है।

(मैंने आईई 6 के लिए एचटीएमएल सशर्त टिप्पणियों के साथ अतिरिक्त सीएसएस में रखा है। मैंने अभी देखा है कि आपको आईई 6 में भी काम करने की ज़रूरत नहीं है, लेकिन यदि आप आईई 6 उपयोगकर्ताओं के लिए अच्छा होने की कल्पना करते हैं ...)

<style type="text/css">
#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
    margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

आईई 6, 7, और 8 में परीक्षण और काम करना; फ़ायरफ़ॉक्स 3.5; और क्रोम 4।







xhtml-1.0-strict