Question

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

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

换句话说，在这个例子中，HTML元素按顺序排列，1,2,3,4,5,6,7,8，左边的col将有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>

Answer 1

我有一个涉及绝对定位的解决方案。根据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,...));
}

Answer 2

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

如果它们都是相同的高度你应该没问题，除此之外我建议有2个容器div并让你的div作为他们的孩子。

CSS浮动左右任意顺序HTML元素，没有空白

2 个答案: