Question

我有6个div红色和蓝色左右对齐。见例：

＆＃13;

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

＆＃13;

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

＆＃13;

没关系。但是，如果div demo2中的内容更高，它将会像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

不幸的是，我不能将它们包含在两个父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>

希望这样做，在查询的情况下回复

Divs左右对齐，两者都不清楚

1 个答案: