首页 > 关于margin百分比数值的一个问题

关于margin百分比数值的一个问题

有两个div想放在同一行,左边的width设为50%,右边的设为40%并且margin-left设为10%
这个时候,右边的div会跑到第二行。似乎是因为百分比计算时进位的问题,把margin-left设为9%就可以显示在同一行。想问下除了这样或者将右边的div浮动外,有没有其他方法能完美解决这个问题。


推测你应该是用了display: inline-block把两个 div 放在一行,如果是的话出现你所描述现象的原因是因为行内元素间距的问题,解决方法也很多,可以参见这篇文章


html:

<div>div1</div>
<div>div2</div>

plan1 CSS:

div{
    float: left;
    width: 50%;
    background: blue;
}
div:last-child{           
    width: 40%;
    margin-left: 10%;
}

plan2 CSS:

div{
    width: 50%;
    background: blue;
}
div:first-child{
    float: left;
}
div:last-child{          
    width: 40%;
    margin-left: 60%;
}

这两种应该能满足你,还有其他的方法...

【热门文章】
【热门文章】