html – 如何在div中正确使用填充？_html-js-css

概述我正试图在div中使用填充,并且由另一个div(‘容器’)包裹,为这个简单的问题道歉,但我找不到答案. 只要我不使用填充：10px;页面结构稳定. 即右侧div向左浮动(‘内容’在旁边’侧边栏’). <html><head><style type="text/css">.container {max-width: 960px;background-color: RED;height: 我正试图在div中使用填充,并且由另一个div(‘容器’)包裹,为这个简单的问题道歉,但我找不到答案.

只要我不使用填充：10px;页面结构稳定.
即右侧div向左浮动(‘内容’在旁边’侧边栏’).

<HTML><head><style type="text/CSS">.container {max-wIDth: 960px;background-color: RED;height: 200px;}.sIDebar {background-color: GREEN;wIDth: 30%;float: left;}.content {background-color: YELLOW;float: left;wIDth: 70%;padding: 10px;}</style></head><body>    <div >    <div >    <p>text in sIDebar</p>    </div>    <div >    <p>text in content</p>    </div>    </div></body></HTML>

使用填充时：10px;正确的div(‘content’)在’sIDebar’下面而不是漂浮到’sIDebar’的一边.

我试过清楚：左; (对,两者)但它对我没有帮助.

对于上述的任何解决方案并且对于< p>而言不是特定的风格.,将不胜感激.

解决方法为了避免超过100％的页面宽度并使.content崩溃,您可能需要做出一些妥协.我可以想到几个解决方案：

1)填写.content的所有直接孩子

.content > * {    padding-left:10px;}

2)使用百分比填充.content

.content {    padding-left:2%;    wIDth:68%;}

3)更改框模型的行为

.content {     Box-sizing:border-Box;     -moz-Box-sizing:border-Box;     -webkit-Box-sizing:border-Box;         }

所有这三种解决方案都会产生一些不好的结果.

>当你想要给出10px以外的元素填充时,填充.content的所有直接子节点可能会导致问题.>使用百分比的填充.content在不同大小的窗口上看起来会略有不同.>如果您不知道自己在做什么,更改框模型的行为可能会很糟糕,因为它会将默认的标准CSS模型更改为未广泛使用的模型(在此示例中,我们基本上告诉现代浏览器使用IEs quirksmode Box model),但它似乎是适合您案例的最佳解决方案.它基本上没有任何问题,除了ie7缺乏支持,ie7仅占浏览器市场份额的2％左右.

总结

以上是内存溢出为你收集整理的html – 如何在div中正确使用填充？全部内容，希望文章能够帮你解决html – 如何在div中正确使用填充？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1073661.html