2010-05-11 190 views
6

这使我疯狂。 “宽度:100%”会发生什么?显然它只适用于IExplore,所以我认为这是微软所做的一件事。Html宽度100%

但是,那么......你如何告诉一个元素必须以所有浏览器都能理解的方式获取所有可用的父级空间?

干杯?

+0

谢谢大家! – vtortola 2010-05-12 16:21:42

回答

11

块级元素(display:block;)将自动占用父元素宽度的100%。您可以使用百分比或像素来调整其宽度。内联元素(display:inline;)不能修改其宽度。

如果你想要的东西为占用所有的父元素的空间,我建议你尝试这样的事:

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

除了百分比或像素,你可以使用任何CSS单位 – 2012-10-22 13:46:05

+0

我试过显示:块和100%,它不起作用。当你改变显示时: :inline,它正在工作! – 2016-05-10 09:07:47

1

请注意,宽度:100%不会对内联标签起作用...因此,属性“显示”为值“内联”的内容不受影响。

如果这是给你的消息,我建议抓住一本书作为HTML是不是学习adhoc的东西。

4

宽度:100%肯定不是MS制造。理解盒子模型,内联vs块(比如跨度vs div)元素将有助于你理解你将看到的一些东西。浏览器的差异与“宽度:100%”有关,与浏览器如何解释给定元素的盒子模型有关,特别是边距,边框和填充等.AFAIK的所有浏览器都将宽度为100%,但是他们如何解释其他的一切可能会影响他们给予“100%”的空间。

请记住,100%是PARENT的100%,而不是WINDOW。

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

在这种情况下,“two”仍然只是窗宽的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 2014-03-27 04:50:28