向左/向右浮动独立容器

Question

我有5个容器：

<div class="wrapper">
 <div id="container-1"></div>
 <div id="container-2"></div>
 <div id="container-3"></div>
 <div id="container-4"></div>
 <div id="container-5"></div>
</div>

我试着将前3个容器向左浮动，最后2个容器向右浮动(从第一个容器开始向左浮动，在顶部)

目前我只实现了将前3个浮动到左边，最后2个浮动到右边，但从最后一个浮动的左边容器开始，而不是顶部的容器。

小提琴：

​

html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  float: left;
  clear: left;
  background: red;
  margin: 5px;
}

.right {
  float: right;
  clear: right;
  background: green;
  text-align: right;
}

<ul>
  <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li>
</ul>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

​

预期结果应该是例如

1 - 3
2 - 5
4 - /
6

Answer 1

您可以使用Flexbox对元素进行排序

​

.wrapper {
  display:flex;
  flex-wrap: wrap;
}
#container-1, #container-2, #container-3, #container-4, #container-5{
 float:left;
 width: 50%; 
}
#container-1 {
  order:1;
}
#container-4 {
  order:2;
}
#container-2 {
  order:3;
}
#container-3 {
  order:5;
}
#container-5 {
  order:4;
}

<div class="wrapper">
  <div id="container-1">container 1</div>
  <div id="container-2">container 2</div>
  <div id="container-3">container 3</div>
  <div id="container-4">container 4</div>
  <div id="container-5">container 5</div>
</div>

​

Answer 2

编辑

  html,
body {
  margin: 0;
  padding: 0;
  position:relative;
}

.left,
.right {
  width: 40%;
  height: 100px;
  margin: 5px;

}

.left{
   float: left;
  clear: left;
  background: red;
}

 .right ~ .right{
  position:absolute;
  top:0;
  right:0;
}
.right {
  background: green;
  text-align: right;
  float:right;
}

<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

编辑2个

      html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  margin: 5px;

}

.left{
   float: left;
  clear: left;
  background: red;
}

.right {
  background: green;
  text-align: right;
  float:right;
}

<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>

Answer 3

我想我可能已经找到了这个问题的解决方案。希望我还来得及。

这是新的代码：

HTML (添加了更多元素来测试它)

<ul>
  <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li>
</ul>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

CSS：

html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  float: left;
  clear: left;
  background: red;
  margin: 5px;
}

.right {
  float: right;
  clear: right;
  background: green;
  text-align: right;
  position: relative; 
  top: -110px; 
}

这里有一个小把戏：https://jsfiddle.net/xw456o6c/1/