अधिकतम स्थान लेने के लिए मैं एक फ़्लोटिंग div गतिशील रूप से कैसे विस्तार करूं?

मेरे पास 3 फ्लोट किए गए बाएं ऑब्जेक्ट हैं, बाईं ओर वाला एक समय हर समय आकार में बदल जाएगा। सही पर हमेशा आकार में तय किया जाएगा। केंद्र एक मैं दो बाहरी divs के बीच जगह भरना चाहता हूँ। अभी यह काम नहीं कर रहा है। अगर मैं केंद्र div की चौड़ाई 100% तक सेट करता हूं तो यह बहुत बड़ा हो जाता है।अधिकतम स्थान लेने के लिए मैं एक फ़्लोटिंग div गतिशील रूप से कैसे विस्तार करूं?

यह सुनिश्चित नहीं है कि इसे कैसे संभाला जाना चाहिए।

संपादित करें: कोड नमूना

<div style="width:1000px"> 
    <div style="float:left;">1</div> 
    <div style="float:left;">Lots of text in here that can be any size....</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

पहले div आकार में गतिशील है। यदि संख्या 10 है तो यह संख्या 1 की तुलना में अधिक जगह ले जा रही है। दूसरा div गतिशील भी होगा, मैं चाहता हूं कि पहले और तीसरे div द्वारा जो भी स्थान नहीं उठाया जाए।

स्रोत

2011-05-30 John Baker

नमूना कोड कृपया। – Niklas

एचटीएमएल

<div style="width:1000px"> 
    <div id="left">1</div> 
    <div id="right">Date/Time</div> 
    <div id="center">Lots of text in here that can be any size....</div> 
</div>

सीएसएस

#left { 
    float: left; 
    width: 20%; 
} 

#center { 
    margin-left: 20%; 
    margin-right: 100px; 
} 

#right { 
    float: right; 
    width: 100px; 
}

fiddle देखें।

स्रोत

2011-05-30 18:54:07 melhosseiny

ऐसा लगता है कि मार्जिन-बाएं वास्तव में उस मामले में काम नहीं करता है, कम से कम जिस पहेली से आपने मुझे लिंक किया है, उसके पास कोई मार्जिन नहीं है –

यह कैसे काम नहीं करता है? – melhosseiny

यदि यह काम कर रहा था तो दो रंगों के बीच एक जगह सही होगी? आपके द्वारा भेजे गए पहेली में मैं एक-दूसरे के बगल में प्रत्येक तत्व को देखता हूं जैसे कि यह एक टेबल में था। –

इस प्रयास करें:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>How do I make a floating div dynamically expand to take up maximum space?</title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     border:1px solid red; 
    } 
    #right { 
     float:right; 
     border:1px solid green; 
     width:100px; 
    } 
    #center { 
     overflow-x:hidden; 
     border:1px solid blue; 
    } 
    </style> 
</head> 
<body> 

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1> 

    <div id="left"> 
    Un-fixed width left, whose content may change. 
    </div> 
    <div id="right"> 
    Fixed WIdth Right column which shouldn't expand. 
    </div> 
    <div id="center"> 
    The center content<br />Which should expand as necessary 
    </div> 

</body> 
</html>

स्रोत

2011-05-30 18:50:14

आपको शायद यह बहुत पहले पता चला, लेकिन अगले व्यक्ति के लिए, आप इसे अब CSS3 फ्लेक्सबॉक्स के साथ कर सकते हैं। (W3c's newest specification, Mozilla documentation, css-tricks)

एचटीएमएल

<div class="flex-container"> 
    <div>1</div> 
    <div class="expandable">Lots of text in here</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

सीएसएस

.flex-container { 
    display: flex; 
    width: 1000px; 
    border: 1px solid black; 
} 
.expandable { 
    flex: 100 100; 
    text-align: center; 
}

यहाँ jsfiddle है।

स्रोत

2015-04-23 12:16:49 slushy

अधिकतम स्थान लेने के लिए मैं एक फ़्लोटिंग div गतिशील रूप से कैसे विस्तार करूं?

उत्तर

संबंधित मुद्दे