我无法链接到网站(NDA),但我已经提出了一些包含相关元素的示例页面：
错：http://cruxwire.com/wrong.html
右：http://cruxwire.com/right.html
我所拥有的是剩下的三个div.我正在尝试为它们添加填充(以百分比表示)并使用target / context = result,然后使用* 100(因为它是一个百分比.)
我的Etwan marcotte的响应式网页设计副本说：“在元素上设置灵活的填充时,你的上下文就是元素本身的宽度.”我给div的宽度为20％.由于父元素是945px,因此每个div的像素宽度为189px.我想添加20px的填充,所以20/189 = 0.1058201058201058.我为10.58201058201058％的每个div添加了一个填充.
这最终给每个div一个100px的填充,而不是20px.我最终意识到填充是基于父元素的宽度计算的,而不是div本身.
我的解决方案是在每个现有的div周围添加一个额外的div,这样我可以将宽度应用于一个,将填充应用于另一个,这样就解决了问题.
为什么填充计算相对于其父元素而不是它自己的元素？
如何在不添加额外div的情况下执行此 *** 作？
你可以在这篇文章中看到链接到的页面上的代码,我也在下面添加了它.
错误：
<!DOCTYPE HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"><Title>WRONG</Title><style>#main { wIDth:945px; margin:0 auto; padding:40px 0; background-color:blue; }#slIDeshow { background-color:green; }.threecolumn { float:left; wIDth:20%; padding:10.58201058201058%; background-color:yellow; } /* 20px/189px */.slIDe { position:relative; margin:0 1%; background-color:red; }p { background-color:white; margin:0; padding:0; }</style></head><body><div ID="main"> <div ID="slIDeshow"> <h1>WRONG</h1> <div > <p>According to FireBUG,this element has 100px padding.</p> </div> <div > <p>According to FireBUG,this element has 100px padding.</p> </div> <div ></div> </div></div></body></HTML> 对：
<!DOCTYPE HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"><Title>RIGHT</Title><style>#main { wIDth:945px; margin:0 auto; padding:40px 0; background-color:blue; }#slIDeshow { background-color:green; }.threecolumn { float:left; wIDth:20%; margin:0 1%; background-color:yellow; } .slIDe { position:relative; padding:10.58201058201058%; background-color:red; } /* 20px/189px */p { background-color:white; margin:0; padding:0; }</style></head><body><div ID="main"> <div ID="slIDeshow"> <h1>RIGHT</h1> <div > <div > <p>According to FireBUG,this element has 20px padding.</p> </div> </div> <div > <div > <p>According to FireBUG,this element has 20px padding.</p> </div> </div> <div > <div > <p>According to FireBUG,this element has 20px padding.</p> </div> </div> <div ></div> </div></div></body></HTML>解决方法 W3框模型包括计算宽度的填充.你真正想要做的是将需要填充的内容包装在另一个div中,并对该div应用一个余量,该余量相当于你不能使用的填充： 示例HTML：
<div ID="nav"> <div ID="left"> <div> <h1>blah blah</h1> </div> </div> <div ID="mIDdle"> <div> <h1>blah blah</h1> </div> </div> <div ID="right"> <div> <h1>blah blah</h1> </div> </div></div>
CSS示例：
.block { wIDth:33%; height:50%; position:relative; float:left; background-color:#CCC; /** Instead of applying a 20px padding here... */}.block>div { margin:20px; /* we apply a 20px margin here */} http://jsfiddle.net/AlienWebguy/Yf34X/1/
总结以上是内存溢出为你收集整理的html – 相同元素的相对宽度和填充全部内容，希望文章能够帮你解决html – 相同元素的相对宽度和填充所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）