css - 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 中的内容更高，它将使 som 像这样:

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

希望这个有用，如有疑问请回复