2010-05-11 16 views
6

यह मुझे पागल कर रहा है। "चौड़ाई: 100%" के साथ क्या होता है? जाहिर है यह सिर्फ आईईक्सप्लोर में काम करता है, इसलिए मुझे लगता है कि माइक्रोसॉफ्ट ने उन चीजों में से एक है।एचटीएमएल चौड़ाई 100%

लेकिन फिर ... आप एक तत्व को कैसे बताते हैं जिसे सभी उपलब्ध माता-पिता की जगह इस तरह से लेनी है कि सभी ब्राउज़र समझ सकें?

चीयर्स?

+0

सभी को धन्यवाद! – vtortola

उत्तर

11

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

आप कुछ सभी माता पिता तत्वों स्थान ले करना चाहते हैं मैं सुझाव है कि आप कुछ इस तरह का प्रयास करें:

.class{ 
    display:block; 
    width:100%; 
} 
+0

प्रतिशत या पिक्सल के अलावा आप किसी भी सीएसएस इकाई –

+0

का उपयोग कर सकते हैं मैंने प्रदर्शन करने की कोशिश की: ब्लॉक और 100% और यह काम नहीं करता है। जब आप प्रदर्शित करने के लिए बदलते हैं: इनलाइन, यह काम कर रहा है! –

2

अगर मैं तुम्हें सही ढंग से समझ, आप चाहे width: 100% पूछ रहे हैं आईई-ही है। जवाब न है; यह सभी मुख्यधारा के ब्राउज़र द्वारा समझा जाता है। स्रोत: http://www.w3schools.com/css/pr_dim_width.asp

1

ध्यान दें कि चौड़ाई: 100% इनलाइन टैग पर काम नहीं करेगा ... इसलिए मूल्य 'इनलाइन' के रूप में संपत्ति 'प्रदर्शन' जैसी चीजें या कहां प्रभावित नहीं होती हैं।

यदि यह आपके लिए खबर है तो मैं एक पुस्तक को पकड़ने की अनुशंसा करता हूं क्योंकि HTML एडमोक सीखने के लिए कुछ नहीं है।

4

चौड़ाई: 100% निश्चित रूप से एक एमएस निर्माण नहीं है। बॉक्स मॉडल और इनलाइन बनाम ब्लॉक (जैसे स्पैन बनाम divs) तत्वों को समझना आपको कुछ दिखाई देने में मदद करेगा। ब्राउजर मतभेदों के साथ "चौड़ाई: 100%" के साथ कम करने के लिए कम है, ब्राउज़र किसी दिए गए तत्व के लिए बॉक्स मॉडल की व्याख्या कैसे करते हैं, और विशेष रूप से मार्जिन, सीमाओं और पैडिंग जैसी चीजों में .AFAIK, सभी ब्राउज़र चौड़ाई का सम्मान करेंगे: 100%, लेकिन वे सबकुछ कैसे समझते हैं, इससे प्रभावित हो सकता है कि वे "100%" के रूप में कितनी जगह देते हैं।

याद रखें कि 100% माता-पिता का 100% है, विन्डोज़ नहीं।

<body> 
    <div id = "one" style="width:50%"> 
    <div id = "two" style = "width:100%" /> 
    </div> 
</body> 

इस मामले में, "दो" अभी भी केवल खिड़की विस्तृत का 50% हो जाएगा, क्योंकि यह एक माता पिता है कि 50% व्यापक है में है। (1 * .5 = .5)

तो, यह कहकर कि, परेशान व्यवहार का एक विशिष्ट उदाहरण लोगों को आपको एक विशिष्ट उत्तर देने में मदद करेगा।

-2
html { 
width:100%; 
} 

body { 
background-color:#f2f2f2; 
margin:0; 
padding:0; 
} 

a { 
color:#ec3f3f; 
text-decoration:none; 
font-weight:400; 
font-style:normal; 
} 

a:hover { 
color:#262626; 
text-decoration:none; 
font-weight:400; 
font-style:normal; 
} 

p,div { 
margin:0!important; 
} 

table { 
border-collapse:collapse; 
} 

::-moz-selection,::selection { 
background:#ec3f3f; 
color:#fff; 
} 

.ReadMsgBody,.ExternalClass { 
width:100%; 
background-color:#f2f2f2; 
} 

@media only screen and max-width640px{ 
img[class=img_scale] { 
width:100%!important; 
height:auto!important; 
} 

img[class=divider] { 
width:440px!important; 
height:2px!important; 
} 

table[class=spacer] { 
display:none!important; 
} 

td[class=center] { 
text-align:center!important; 
} 

table[class=full] { 
width:400px!important; 
margin-left:20px!important; 
margin-right:20px!important; 
} 

table table,td[class=full_width] { 
width:100%!important; 
} 

div[class=div_scale],table[class=table_scale],td[class=td_scale] { 
width:440px!important; 
margin:0 auto!important; 
} 
} 

@media only screen and max-width479px{ 
img[class=img_scale] { 
width:100%!important; 
height:auto!important; 
} 

img[class=divider] { 
width:280px!important; 
height:2px!important; 
} 

table[class=spacer] { 
display:none!important; 
} 

td[class=center] { 
text-align:center!important; 
} 

table[class=full] { 
width:240px!important; 
margin-left:20px!important; 
margin-right:20px!important; 
} 

table table,td[class=full_width] { 
width:100%!important; 
} 

div[class=div_scale],table[class=table_scale],td[class=td_scale] { 
width:280px!important; 
margin:0 auto!important; 
} 
} 
+1

आप इस पोस्ट को थोड़ा सा प्रारूपित करना चाहते हैं ... :) – summea

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