我尝试制作这样的 div 网格http://jsfiddle.net/hGadw/ http://jsfiddle.net/hGadw/
<div id="outer1"><!--
--><div class="inner top left"> </div><!--
--><div class="inner top right"> </div><!--
--><div class="inner bottom left"> </div><!--
--><div class="inner bottom right"> </div><!--
--></div>
<br>
<div id="outer2"><!--
--><div class="inner top left"></div><!--
--><div class="inner top right"></div><!--
--><div class="inner bottom left"></div><!--
--><div class="inner bottom right"></div><!--
--></div>
我把它的样式做了如下
* {
box-sizing: border-box;
margin:0;
padding:0;
}
body {
background-color: black;
}
#outer1, #outer2 {
width:200px;
height:200px;
margin:auto;
border-radius:50%;
}
.inner {
height: 50%;
width:50%;
display: inline-block;
}
.top.left {
background-color: green;
border-radius: 100% 0 0 0;
}
.top.right {
background-color: #ff3300;
border-radius: 0 100% 0 0;
}
.bottom.left {
background-color: darkcyan;
border-radius: 0 0 0 100%;
}
.bottom.right {
background-color: darkred;
border-radius: 0 0 100% 0;
}
第一个有效，但第二个在上下 div 之间有间隙。
为什么会出现差距？
原因是由于没有折叠边距。
“在本规范中，折叠边距这一表述意味着相邻边距 (没有非空内容两个或多个框（可能彼此相邻或嵌套）的、填充或边框区域或将它们分开的间隙组合起来形成一个边距。”
因此，在您的情况下，空的内联块元素（没有边框/内容/填充间隙将它们分开）不要让它们的边距塌陷。
欲了解更多信息：http://www.sitepoint.com/web-foundations/collapsing-margins/ http://www.sitepoint.com/web-foundations/collapsing-margins/
Put 在其他 div 中也是如此
检查这个小提琴http://jsfiddle.net/hGadw/3/ http://jsfiddle.net/hGadw/3/
<div id="outer1"><!--
--><div class="inner top left"> </div><!--
--><div class="inner top right"> </div><!--
--><div class="inner bottom left"> </div><!--
--><div class="inner bottom right"> </div><!--
--></div>
<br>
<div id="outer2"><!--
--><div class="inner top left"> </div><!--
--><div class="inner top right"> </div><!--
--><div class="inner bottom left"> </div><!--
--><div class="inner bottom right"> </div><!--
--></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
