केंद्र गतिशील चौड़ाई के साथ 3 चल divs

वोट
3

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

<style type=text/css>
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id=container>
    <div id=left>text</div>
    <div id=middle>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
    <div id=right>text</div>
</div>
09/08/2011 को 15:58
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


5 जवाब

वोट
2

आप बीच div का उपयोग कर की चौड़ाई निर्धारित कर सकते हैं jQuery , जैसे:

$('#middle').width($('#container').width()-120);

कार्य डेमो

09/08/2011 को 16:03
का स्रोत उपयोगकर्ता

वोट
8

आप इस तरह अपने सीएसएस की स्थापना की कोशिश कर सकते:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

09/08/2011 को 16:05
का स्रोत उपयोगकर्ता

वोट
1

कुछ तुच्छ जावास्क्रिप्ट के साथ इस प्रयास करें: http://jsfiddle.net/maniator/SjMqU/

var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';

और इस बेला विंडो आकार परिवर्तन पर काम करता है: http://jsfiddle.net/maniator/SjMqU/4/

09/08/2011 को 16:06
का स्रोत उपयोगकर्ता

वोट
0

सबसे अच्छा तरीका है करने के लिए यह एक तालिका में डाल करने के लिए होगा, लेकिन अगर आपको लगता है कि बस सभी divs तालिका सेल की तरह व्यवहार नहीं करते हैं:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
09/08/2011 को 16:10
का स्रोत उपयोगकर्ता

वोट
0

आप कुछ इस तरह कर सकता है:

#container{width:100%;
}
#left, #middle, #right{min-height:70px; 
    display:inline-block;
    vertical-align:top;
}
#left{width:19%;
    background:red;
}
#middle{width:60%; 
    background:green;
}
#right{width:19%; 
    background:blue;
}

http://jsfiddle.net/jasongennaro/8BqP9/

09/08/2011 को 16:11
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more