那些遇到过的问题

CSS Float Left to Line Up

tik*_*ika 7 css css3

(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>
Run Code Online (Sandbox Code Playgroud)

和CSS:

li{
    width:100px;
    height:100px;
    background:#eee;
    display:inline-block !important;
    border:1px solid #ccc;
}
li.half{
    width:50px; height:50px
}
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

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

con*_*exo 7

对此最好的解决方案是重新构建标记.对于较小的列表项,您需要创建一个新的浮动上下文(如果你是浮动的,我推荐这是因为与内联块有关的空白相关问题),所以你可以在第三个项目上结束浮动(创建一个"新行")而没有破坏较大的列表项的浮动.

解决这个问题的另一种方法是灵活盒模型,但这种方法更难以学习,并且不能跨浏览器工作.

ul,
li {
  box-sizing: border-box;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  display: block;
  float: left
}
ul {
  width: 400px
}
ul,
h3 {
  clear: both
}
li {
  width: 100px;
  height: 100px;
  background: #eee;
  border: 1px solid #ccc;
  float: left;
}
.sublist > li {
  width: 50px;
  height: 50px
}
.sublist li:nth-of-type(3) {
  clear: left;
}
Run Code Online (Sandbox Code Playgroud) 
<h3>Example 1:</h3>

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

<h3>Example 2:</h3>

<ul>
  <li></li>
  <li>
    <ul class="sublist">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

检查这个(相同的)小提琴:

https://jsfiddle.net/Lok8oo6b/3/

编辑:这是一个工作解决方案,不需要任何标记更改:

ul,
li {
  box-sizing: border-box;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  display: block;
  float: left
}
ul,
h3 {
  clear: both
}
li {
  width: 100px;
  height: 100px;
  background: rgba(240, 240, 240, 0.5);
  border: 1px solid #ccc;
  position: relative;
  display: inline-block;
}
.half {
  background-color: #fff;
  height: 50px;
  width: 50px;
}
.half+.half+.half {
  left: -100px;
  top: 50px;
}
.half+.half+.half+.half+li {
  margin-left: -100px;
}
Run Code Online (Sandbox Code Playgroud) 
<h3>Example 1:</h3>

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

<h3>Example 2:</h3>

<ul>
  <li></li>
  <li class="half"></li>
  <li class="half"></li>
  <li class="half"></li>
  <li class="half"></li>
  <li></li>
  <li></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/Lok8oo6b/6/

Sha*_*ggy 4

无论 4 个较小的项目出现在列表中的何处，也无论您有多少组，您都可以实现您想要的目标，并且不需要通过使用相邻的同级选择器和一些涉及边距的技巧来进行任何额外的标记。

更新：添加了拥有一组 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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

解释一下最后 4 条规则中发生的情况：

  1. small选择紧接着至少两个其他 class 项目的class 的每个项目small。将它们向下移动，使用顶部margin一个小项目的高度加上边距大小 - 45+10=55px。将它们向右移动，使用负数向左移动margin2 个小项目的宽度加上双倍边距大小 - 2*(45+10)=110px。

  2. 为了在组只有 3 个小项目时“重置”边距，我们引入了否定伪类来选择前面至少有 3 个小项目small但本身不具有小项目的每个项目。使用margin-left，我们将其向左移动一个小项目的宽度加上边距大小 - 45+10=55px。

  3. 接下来，我们需要覆盖 class 的每四个项目的边距small。如果我们不这样做，布局就会完全混乱，因为第四个项目也与第一个选择器匹配。对于这一点，我们只需将其再次向下移动一个小项目的高度加上边距大小，因此，如步骤 1 所示，我们将顶部设置margin为 55px。无需margin在此处设置左侧，因为通过在前一项上使用负边距，此项会随之向右移动。

  4. 最后，我们需要margin-left从每个不是的项目中删除.small，并且前面至少有四个是的项目。

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

445 次

最近记录：

9 年，5 月 前
相关归档
angularjs:ng-src等效于background-image:url(...) 149
Bootstrap 3无法正确显示glyphicon 56
如何为vh vw写css后备 23
CSS转换在悬停时淡出 20
LESS CSS中的动态变量名称 19
CSS使用自动保证金固定头寸 18
(真的)长背景图像无法在iPad Safari上渲染 17
使径向渐变半径为200px 4
悬停期间更改Div的边框 4
制作幻灯片的问题.显示无？ 1
难疑归档
最终C++书籍指南和列表 4246
如何删除远程标签？ 3121
做一个"git export"(比如"svn export")？ 2312
运算符重载的基本规则和习惯用法是什么？ 2074
数据绑定如何在AngularJS中运行？ 1924
Java内部类和静态嵌套类 1691
禁用Chrome缓存以进行网站开发 1563
如何离开/退出/停用python virtualenv？ 1461
Tab键== 4个空格并在Vim中的花括号后自动缩进 1224
使用pip安装特定的软件包版本 1199