相关疑难解决方法(0)
为什么这种CSS margin-top风格不起作用？
我尝试在另一个div内的div上添加边距值.一切正常,除了最高值,它似乎被忽略了.但为什么？
我的期望:
我得到了什么:
码:
#outer {
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto 0 auto;
display: block;
}
#inner {
background: #FFCC33;
margin: 50px 50px 50px 50px;
padding: 10px;
display: block;
}<div id="outer">
<div id="inner">
Hello world!
</div>
</div>W3Schools没有解释为什么保证金的行为方式.
推荐指数
解决办法
查看次数
CSS:浮动元素时对边距折叠问题的清晰解决方案
示例HTML + CSS:
<html>
<body style="padding: 0; margin: 0;">
<div style="float: right;">first</div>
<div style="margin-top: 2em;">second</div>
</body>
</html>
所需的行为:将firstDIV浮到窗口的右上角. 实际行为:它漂浮在所需位置下方2em处. 原因: 保证金崩溃.
尽管发现了问题,但我能提出的解决方案感觉就像黑客一样:
- 改变
body风格margin: -1px 0 0 0; border-top: 1px solid;. <div style="height: 1px; margin-bottom: -1px;"></div>之前插入first<div>在first和之间插入上面的内容second
是否有一种清洁,惯用的方法来避免这个问题？
推荐指数
解决办法
查看次数
为什么保证金顶部不起作用？
html结构:
#main {
margin: 0 auto;
width: 960px;
}
#left {
float: left;
border: 1px solid red;
width: 300px;
margin-right: 10px;
height: 500px;
}
#right {
float: right;
border: 1px solid green;
width: 500px;
height: 500px;
}
#footer {
clear: both;
margin-top: 20px;
border: 1px solid lime;
height: 200px;
}风格:
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>为什么 margin-top: 20px;页脚不起作用？原因可能是什么原因造成的？
推荐指数
解决办法
查看次数
溢出:隐藏在div和body上,行为不同
给出这个HTML:
<body>
<div id="a"></div>
<div id="b"></div>
</body>
我想#b填充其容器块的所有剩余垂直空间,我从这开始:
body {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
所以#b是100%的高度,这意味着它正在占据其父容器块的高度,也就是说,500px问题是overflow: hidden;似乎不起作用,#b没有被剪裁.
另一方面,如果我用另一个具有上述相同属性的div进行换行#a,我得到了所需的结果:#bbody
#wrap {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
用这个HTML当然:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div> …推荐指数
解决办法
查看次数
为什么这个非浮动保证金会随着浮动而崩溃？
在调查关于清除漂浮物的这个问题时,我遇到了一个特殊的情况,边缘和间隙与非浮动的盒子.
根据规范第8.3.1节,任何一方都不应发生保证金崩溃
- 产生边距的至少一个元素是浮点数,或
- 通关是阻碍的.
但是,考虑一系列浮箱,其中最后一个清除其余的:
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
div.container > div {
float: left;
width: 50px;
height: 50px;
margin: 10px;
}
div.container > div:last-child {
clear: left;
}
正如您所料,每个盒子之间的水平和垂直间隙都是20像素宽.垂直边距不会崩溃.
但是,当清除元素没有浮动时,它会向上跳10个像素,就好像它的上边距与其正上方的浮动边缘一样坍塌.
此行为完全违反了上面列出的两个条件:
- 有通关.
- 为了发生间隙,首先必须有一些其他浮子清除.清算单元本身没有浮动的事实不应该是相关的.
这种行为似乎在所有浏览器中都是一致的,包括不到最新版本的IE.
也就是说,我并没有像我的手背那样声称知道CSS浮动模型,所以......其他人可以解释为什么会发生这种情况吗？
推荐指数
解决办法
查看次数
有人可以向我解释为什么清楚:两者和margin-top不能在同一个div中工作
我已经遇到过一些解释,包括stackoverflow,但不幸的是,我仍然无法完全理解它的原因是什么.
那么,有人可以用简单的方式解释一下吗？
这是一个类似于我问的问题,但我不明白是什么原因.它解决了我的问题,但我只想知道原因.
谢谢
推荐指数
解决办法
查看次数