盒子被卡起了是什么原因呢,以前记得见过这样的问题,但是现在想不起来了,请问该怎么做啊?
<div class="catBox clearfix">
<div class="catBoxItem ">
<a href="http://m.example.com//">职业选择</a>
</div>
<div class="catBoxItem ">
<a href="http://m.example.com//">JavaScript教程</a>
</div>
<div class="catBoxItem ">
<a href="http://m.example.com//">MySQL教程</a>
</div>
<div class="catBoxItem ">
<a href="http://m.example.com//">Linux教程</a>
</div>
<div class="catBoxItem ">
<a href="http://m.example.com//">Python教程</a>
</div>
<div class="catBoxItem ">
<a href="http://m.example.com//">HTML|CSS教程</a>
</div>
</div>
.catBox{
width: 100%;
}
.catBoxItem{
width: 49%;
float: left;
border: none;
padding: 0;
margin: 5px 0 0 0;
}
.clearfix:after,.clearfix:before{
content: '';
display: block;
clear: both;
}
包裹catBox div的父元素不够大?检查一下父元素的实际width是多少。感觉像是父元素宽度不够引起的
可能是.catBoxItem的高度不一致导致左浮动时被挡住了
你catBoxItem都百分49都远超父级百分百了,建议去掉看看让内容撑开!而且还有margin在!
如果是可控制宽度或者高度的情况 尽可能使用其避免太多不确定因素