将单独的容器向左/向右浮动答案

【问题标题】：Floating separate containers left/right to each other将单独的容器向左/向右浮动
【发布时间】：2017-10-07 09:45:57
【问题描述】：

我有 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

【问题讨论】：

在 html 中使用 id 选择器，在 css 中使用类选择器。它是如何工作的？
已编辑，此处出错，因为我刚刚重新输入了它:) 但选择器没问题
只有5个容器或更多？
容器的数量根据添加到站点的内容是动态的
能否分享您的完整标记

标签： html css css-float containers

【解决方案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>

【讨论】：

嘿，很好的开始，但由于我的 div 将是动态的，因此使用 order 并不是最好的解决方案。 => jsfiddle.net/Kemagezien/p89xfrm3

【解决方案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>

【讨论】：

嗨，您在它周围添加了一个容器 div（左右类）。我无法更改/添加/删除我拥有的代码:)
嗯，好吧，我猜你必须强迫它在那里，但它不会很漂亮，比如 position: relative;底部：（一些像素）。为什么不能改？
与其他开发人员合作，由他们决定。我试图用 flexbox 来实现它，但似乎是同样的问题。 jsfiddle.net/Kemagezien/zem6js03/1
@Kemagezien 看看 Manish Patel 的回答，我想它就是你要找的 :)
好的，但是如果我添加更多“正确”-div，它们都会转到顶部：0 并互相溢出这可以通过继续添加 ~ .right 但是...嗯...

【解决方案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/

【讨论】：