CSS Float Left to Line Up

时间：2015-05-15 05:32:52

标签： css css3

(JSFIddle) 使用float : left，我们可以实现这一目标： enter image description here 

<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没有标记的原因!!）

enter image description here

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

3 个答案:

答案 0 :(得分：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;
}
<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>

检查这个（相同的）小提琴：

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;
}
<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>

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

答案 1 :(得分：4)

无论您的列表中出现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条规则中的内容：

  1. 选择课程small的每个项目，其前面至少有两个其他类small项。将它们向下移动，使用顶部margin按一个小项目的高度加上边距大小 - 45 + 10 = 55px。将它们向左移动，使用负左margin宽度为2个小项加上边距大小加倍 - 2 *（45 + 10）= 110px。

  2. 要在一个组只有3个小项目时“重置”边距，我们会引入negation pseudo class来选择至少有三个类small项之前的每个项目，但是不是自己有小班。使用margin-left，我们将左侧移动一个小项目的宽度加上边距大小 - 45 + 10 = 55px。

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

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

    5. 更新27/05/16：所以，我终于回到了这个并对其进行了修改，以便能够将最多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>

答案 2 :(得分：0)

你只需要使用：nth-​​child（N）选择器定位第二和第三个li并使其浮动到右边。

你的css看起来像：

 ul,li{
    margin:0;padding:0;display:block;
}
ul{width:450px}
ul,h3{clear:both}
li{
    width:100px;
    height:100px;
    background:#eee;
    float: left;
    border:1px solid #ccc;
}
li.half{
    width:50px; height:50px;

}
.ex1 li:nth-child(2), .ex1 li:nth-child(3){
   float: right;    
}

检查updated fiddle please

相关问题
最新问题