将单独的容器左/右相互浮动

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个向右浮动，但从最后一个开始，浮动左侧容器而不是顶部容器。

小提琴：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预期结果应该是例如

1 - 3
2 - 5
4 - /
6

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为我可能已经找到了解决这个问题的方法。希望我不会太晚。

这是新代码：

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/

Answer 3

修改

    SideDrawerlistAdpater drawerlistAdpater = new SideDrawerlistAdpater(SideNavigationDrawer.this, titles, icons);
            listview.setAdapter(drawerlistAdpater);

            listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Log.d(TAG,"get poisition" +position);

                    selectItem(position);
                }
            });

public void selectItem(int position) {
        switch (position) {
            case 0:
                Intent intent = new Intent(NewMapsActivity.this, DriverEarningsTabbedActivity.class);
                startActivity(intent);
                overridePendingTransition(R.anim.activity_in, R.anim.activity_out);
                break;
            case 1:
                startActivity(new Intent(NewMapsActivity.this, Subscriptions.class));
                overridePendingTransition(R.anim.activity_in, R.anim.activity_out);
                break;

        }
    }

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

编辑2

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

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