CSS Float Left to Line Up

(JSFIddle) 使用float：left,我们可以实现这个目的：

<ul>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li class="half">&nbsp;</li>
    <li class="half">&nbsp;</li>
    <li class="half">&nbsp;</li>
    <li class="half">&nbsp;</li>
</ul>

和CSS：

li{
    width:100px;
    height:100px;
    background:#eee;
    display:inline-block !important;
    border:1px solid #ccc;
}
li.half{
    width:50px; height:50px
}

但是,我们怎样才能做到这一点？ (留在这个HTML标记中 – 这就是为什么HTML没有被标记!!)

我注意到在第一种情况下,第二行小图像是一个新行.但是,有什么办法可以解决这个问题吗？

解决方法

你可以实现你正在寻找的东西,无论你的列表中出现4个较小的项目,或者你有多少组,而不需要任何额外的标记,使用 adjacent sibling selectors和一些涉及边距的技巧.

更新：添加了一组3个小项目的功能

这里有一个非常快速的概念证明,最后4条规则对我们在这里做的最重要.下面唯一的警告是,你不能在另一组小物品之后立即拥有一组小物品.

ul{
    font-size:0;
    list-style:none;
    margin:0;
    padding:0;
    width:550px;
}
li{
    background:red;
    height:100px;
    display:inline-block;
    margin:0 10px 10px 0;
    vertical-align:top;
    width:100px;
}
li.small{
    background:green;
    height:45px;
    width:45px;
}
li.small+li.small+li.small{
    margin:55px 10px 10px -110px;
}
li.small+li.small+li.small+li:not(.small){
    margin-left:55px;
}
li.small+li.small+li.small+li.small{
    margin:55px 10px 10px 0;
}
li.small+li.small+li.small+li.small+li:not(.small){
    margin-left:0;
}

<ul>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
</ul>

要解释最近4条规则中的内容：

>选择小班级的每个项目,其前面至少有两个小班级的其他项目.将它们向下移动,使用上边距按一个小项目的高度加上边距大小 – 45 10 = 55px.将它们向右移动,使用左侧边距为2个小项目的宽度加上边距大小的两倍 – 2 *(45 10)= 110px.
>当一个组只有3个小项时,为了“重置”边距,我们引入negation pseudo class来选择每个项目前面至少有三个小类的项目,但本身不具有小类.使用margin-left,我们向左移动一个小项目的宽度加上边距大小 – 45 10 = 55px.
>接下来,我们需要覆盖每小类第四项的边距.如果我们不这样做,布局将完全混乱,因为每个第四项也匹配第一个选择器.对于这个,我们只需要再将它移动一个小项目的高度加上边距大小,因此,如在步骤1中,我们将上边距设置为55px.无需在此处设置左边距,因为通过在前一项上使用负边距,此边距会向右移动.
>最后,我们需要从每个不是.small的项目中删除margin-left,并且前面至少有四个项目.

2016年5月27日更新：所以,我终于回到了这里并对其进行了修改,以便能够将多达8个小项目组合在一起.我还没有机会记录新的规则,并且有一些限制,一组小项目必须包含在一行中,一行不能以一个小项目或一组5来结束你已经可以看到代码变得非常笨拙,只会增加你将8个以上的小项组合在一起的能力.

ul{
    background:#000;
    font-size:0;
    list-style:none;
    margin:0 auto;
    padding:10px 0 0 10px;
    width:550px;
}
li{
    border:1px solid #fff;
    Box-sizing:border-Box;
    background:red;
    height:100px;
    display:inline-block;
    margin:0 10px 10px 0;
    vertical-align:top;
    width:100px;
}
li.small{
    background:green;
    height:45px;
    width:45px;
}
li.small+li.small+li.small+li.small+li.small{
    background:blue;
}
li.small:first-child+li:not(.small),li:not(.small)+li.small+li:not(.small),li.small:first-child+li.small+li.small+li.small+li.small+li:not(.small),li:not(.small)+li.small+li.small+li.small+li.small+li.small+li:not(.small){
    margin-left:55px;
}
li.small+li.small+li.small{
    margin:55px 10px 10px -110px;
}
li.small+li.small+li.small+li:not(.small){
    margin-left:55px;
}
li.small+li.small+li.small+li.small{
    margin:55px 10px 10px 0;
}
li.small+li.small+li.small+li.small+li:not(.small){
    margin-left:0;
}
li.small+li.small+li.small+li.small+li.small{
    margin-top:0;
}
li.small+li.small+li.small+li.small+li.small+li.small+li.small{
    margin:55px 65px 10px -110px;
}
li.small+li.small+li.small+li.small+li.small+li.small+li.small+li.small{
    margin:55px 10px 10px -55px;
}

<ul>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
    <li class="small"></li>
</ul>

CSS Float Left to Line Up

解决方法

相关文章