CSS浮动左对齐

tika 发表于 Dev

曾是

（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个较小的项目，有多少组，而且不需要任何额外的标记，您都可以实现所需的结果。

更新：增加了将三个小物件组合在一起的功能

这是一个非常快速的概念证明，其中最后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条规则的内容，请执行以下操作：

选择班级small中紧接其他至少两个班级的每一项small。向下移动它们，使用margin一个小物件的高度加上边距大小-45 + 10 = 55px。将它们向右移动，使用margin2个小物件的宽度向左移动负数再加上两倍的边距大小-2 *（45 + 10）= 110px。
为了在一组只有3个小项目的情况下“重置”页边空白，我们引入了否定伪类来选择每个至少有3个小项目small但其本身没有小项目的项目。使用margin-left，我们将其向左移动一个小物件的宽度加上边距大小-45 + 10 = 55px。
接下来，我们需要覆盖class的每四个项目的边距small。如果我们不这样做，则布局将完全混乱，因为每个第四项也与第一个选择器匹配。对于此项目，我们只需要再次将其向下移动一个小项目的高度加上边距大小，因此，如在步骤1中一样，我们将顶部设置margin为55px。无需在margin此处设置左侧，因为通过在前一项上使用负边距，此选项会随之向右移动。
最后，我们需要margin-left从每个不存在的项目中删除，.small并在其之前至少包含四个项目。

UPDATE 27/05/16：因此，我终于回到了这个问题，并对其进行了修改，使其能够将最多8个任意数量的小物品组合在一起。我还没有机会记录新规则，并且有一些局限性，必须将一组小物件包含在一行中，并且一行不能以单个小物件或一组五个结尾您已经可以看到代码变得非常笨拙，并且只会随着添加的功能将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>