2

HTML元素是否可以（以及如何）左右浮动，无论它们处于什么HTML标签顺序，都可以完美堆叠，只是自上而下所有浮动：左侧堆叠在左侧，所有浮动：右侧堆叠在右侧，没有间隙？

（最好使用最干净最标准的 CSS 实践，没有使用 javascript 等的绝对定位脚本）

换句话说，在这个例子中，HTML 元素按顺序排列，1,2,3,4,5,6,7,8，左列将有 1、3、5、6 向左浮动，而 2， 4、7、8 向右浮动，在规则间隔的元素中，没有白色间隙。 

I want results like this layout:

|  1  2  |
|  3  4  |
|  5  7  |
|  6  8  |

Instead, I'm getting results like this layout:

|  1  2  |
|  3  4  |
|  5     |
|  6  7  |
|     8  |

这是基本的 HTML/CSS 代码示例：

<html>

 <style>

  .lefties, .righties {

   width: 40%;
   height: 100px;
   background: #DEF;
   float: left;
   clear: left;

  } 

  .righties { 

   background-color: #FED;
   float:right;
   clear:right; 

  }



  </style>

  <div id="container">

   <div class="lefties" >Test 1</div>
   <div class="righties">Test 2</div>
   <div class="lefties" >Test 3</div>
   <div class="righties">Test 4</div>
   <div class="lefties" >Test 5</div>
   <div class="lefties" >Test 6</div>
   <div class="righties">Test 7</div>
   <div class="righties">Test 8</div>

  </div>

</html>
4

2 回答 2

3

我有一个涉及绝对定位的解决方案。根据 W3.org 的说法，有一些东西正在开发toggle()中。

现在，我们被这个烂摊子困住了：

<html>
<body>

<style>

.lefties, .righties{
  top: 10px;
  width: 40%;
  height: 100px;
  position: absolute;
}

.lefties {
  background: #DEF;
  left: 10px;
}

.righties { 
  background-color: #FED;
  right: 10px;
}

.lefties ~ .lefties,
.righties ~ .righties{
  transform: translate(0px, 100px);
}

.lefties ~ .lefties ~ .lefties,
.righties ~ .righties ~ .righties{
  transform: translate(0px, 200px);
}

.lefties ~ .lefties ~ .lefties ~ .lefties,
.righties ~ .righties ~ .righties ~ .righties{
  transform: translate(0px, 300px);
}

.lefties ~ .lefties ~ .lefties ~ .lefties ~ .lefties,
.righties ~ .righties ~ .righties ~ .righties ~ .righties{
  transform: translate(0px, 400px);
}

.lefties ~ .lefties ~ .lefties ~ .lefties ~ .lefties ~ .lefties,
.righties ~ .righties ~ .righties ~ .righties ~ .righties ~ .righties{
  transform: translate(0px, 500px);
}
</style>

<div id="container">
  <div class="lefties" >Test 1</div>
  <div class="righties">Test 2</div>
  <div class="lefties" >Test 3</div>
  <div class="righties">Test 4</div>
  <div class="lefties" >Test 5</div>
  <div class="lefties" >Test 6</div>
  <div class="lefties" >Test 7</div>
  <div class="righties">Test 8</div>
  <div class="righties">Test 9</div>
  <div class="righties">Test 10</div>
  <div class="lefties" >Test 11</div>
  <div class="righties">Test 12</div>
</div>

</body>
</html>

但是toggle()，看起来我们可以清理 .lefties ~ .lefties ~ .lefties ~ ... 看起来像这样：

.lefties ~ .lefties,
.righties ~ .righties{
    transform: translate(0px, toggle(100px,200px,300px,400px,...));
}
于 2013-03-06T03:22:31.680 回答
0

如果所有 DIV 的高度不同，则不会发生这种情况。

如果它们的高度都一样，你应该没问题，除此之外，我建议有 2 个容器 div 并将你的 div 作为它们的子级。

于 2013-03-06T03:07:15.780 回答