div对齐左右而不清除两者

Question

我有6个div，红色和蓝色分别向左和向右对齐。参见示例:

.blue{
    float:left;
    margin-bottom:10px;
    width:41%;
    height:auto;
    background:blue;
    }
.red{
    float:right;
    margin-bottom:10px;
    width:41%;
    height:auto;
    background:red;
    }
.demo{
    width:41%;
    height:100px;
    }

<div class="blue"><div class="demo"></div></div>
<div class="red"><div class="demo"></div></div>
<div class="blue"><div class="demo"></div></div>
<div class="red"><div class="demo"></div></div>
<div class="red"><div class="demo"></div></div>
<div class="blue"><div class="demo"></div></div>

没关系。但是如果div demo2中的内容比较高它会显示如下内容:

.blue{
    float:left;
    margin-bottom:10px;
    width:41%;
    height:auto;
    background:blue;
    }
.red{
    float:right;
    margin-bottom:10px;
    width:41%;
    height:auto;
    background:red;
    }
.demo{
    width:41%;
    height:100px;
}
.demo2{
    width:41%;
    height:150px;
    }

<div class="blue"><div class="demo2"></div></div>
<div class="red"><div class="demo"></div></div>
<div class="blue"><div class="demo"></div></div>
<div class="red"><div class="demo"></div></div>
<div class="red"><div class="demo"></div></div>
<div class="blue"><div class="demo"></div></div>

不幸的是，我不能将它们包含到两个父div(例如#left， #right)中，因为这些框需要长期排序。

我尝试使用position/fixed/absolute/，但是没有效果

Answer 1

您需要按照以下方式创建html

    .parent{ float: left; height: auto; width: 100%; margin-bottom:10px; }
    
    .blue{ float:left; width:41%; height:100%; background:blue; } 
    
    .red{ float:right; width:41%; height:100%; background:red; } 
    
    .demo{ width:41%; height:100px; } 
    
    .demo2{ width:41%; height:150px; }

    <div class='parent' style='height:150px'> 
      <div class="blue"><div class="demo2"></div></div> 
      <div class="red"><div class="demo"></div></div> 
    </div> 
    <div class='parent'> 
      <div class="blue"><div class="demo"></div></div> 
      <div class="red"><div class="demo"></div></div> 
    </div> 

希望这是有效的，如有疑问请回复