方法一:父元素设置font-size:0;
产生原因:
因为标签不在同一行的回车导致的换行
<style>
*{
margin:0;
padding:0;
}
.d1{
width:750px;
height:90px;
font-size:0;
}
.d2,.d3{
height:90px;
display:inline-block;
outline:none;
border:none;
}
.d2{
width:150px;
background:#f00;
}
.d3{
width:600px;
background:#0ff;
}
</style>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
方法二:标签全写一行,但是这样对某些编译工具来说,不现实,格式化代码就会出现问题,个人认为不怎么好
<style>
*{
margin:0;
padding:0;
}
.d1{
width:750px;
height:90px;
}
.d2,.d3{
height:90px;
display:inline-block;
outline:none;
border:none;
}
.d2{
width:150px;
background:#f00;
}
.d3{
width:600px;
background:#0ff;
}
</style>
<div class="d1"><div class="d2"></div><div class="d3"></div></div>
方法三:借用注释标签
<style>
*{
margin:0;
padding:0;
}
.d1{
width:750px;
height:90px;
font-size:0;
}
.d2,.d3{
height:90px;
display:inline-block;
outline:none;
border:none;
}
.d2{
width:150px;
background:#f00;
}
.d3{
width:600px;
background:#0ff;
}
</style>
<div class="d1">
<div class="d2"></div><!--
--><div class="d3"></div>
</div>