两个50%的盒子为什么放不下

Posted zhangce

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两个50%的盒子为什么放不下相关的知识,希望对你有一定的参考价值。

/*html*/
<div class=wrap>
	<div class="red"></div>
	<div class="blue"></div>
</div>
/*css*/
.wrap{
	width:200px;
	height:100px;
	border: 4px solid #000;
}
.wrap div{
	width:50%;
	height:100%;
	box-sizing:border-box;
	display:inline-block;
}
.red{
	background: red
}
.blue{
	background: blue;
}

设置父盒子 box-sizing:border-box 属性,这时盒子内容区就不受边框影响,始终为100px*200px

但是,父盒子还是放不下

为什么会出现这种情况呢,因为两个子盒子之间有一个空白文本节点,

inline 和 inline-block 是内联布局,既然是内联那么就会受空白区域的影响;如果在 .wrap 加上 white-space: nowrap;,会看到有一小区域是空白的。

解决办法:

.wrap{
    font-size:0;
}

或者

或者

以上是关于两个50%的盒子为什么放不下的主要内容,如果未能解决你的问题,请参考以下文章

CSS中盒子模型的标准流定位原则是啥?

放不下

为什么放不下那些伤

一旦你学习了typescript,你就再也放不下了

css常用代码片段 (更新中)

怎样使网页设计中的css盒子内容居中?