浮动时如何根据其他div调节div的高度和宽度

Question

我有多个DIV，属性float左而宽50％，因为我希望下一个div出现在当前DIV和底部或下一行中的另一个DIV。（我在foreach循环中打印它）

<div class="row" style="width:100%;">
<div class="" style="width:50%;float:left;">
  <div style="font-size:14px;color: #500050;">
    <p class="abc">ABC</p>
  </div>
  <div style="font-size: 12px;color: black;">
    <span>23:54</span>&nbsp;
    <span>ABC</span><br/>
    <span>dsds</span><br/>
    <span>dsfsafsaf sdsad ad</span>
  </div>
</div>
<div class="" style="width:50%;float:left;">
  <div style="font-size:14px;color: #500050;">
    <p class="">XYZ</p>
  </div>      
  <div style="font-size: 12px;color: black;">
    <span>time </span>&nbsp;
    <span>$value->type </span><br/>
    <span>subtype </span><br/>
    <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
    <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
    <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
  </div>
</div>
<div class="" style="width:50%;float:left;">
  <div style="font-size:14px;color: #500050;">
    <p class="">PQR</p>
  </div>      
  <div style="font-size: 12px;color: black;">
    <span>time </span>&nbsp;
    <span>type </span><br/>
    <span> subtype </span><br/>
    <span> description </span>
  </div>
</div>

它的工作正常，但是如果第二个DIV高度超过第一个高度，则第一个Div调整其高度等于第二个DIV，第三个DIV出现在第一个Div以下如下

ABC                                XYZ
23:54  ABC                         time   $value->type
dsds                               subtype 
dsfsafsaf sdsad ad                 description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj 
                                   description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj 
                                   description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj
PQR 
time   type 
subtype 
description

，但我希望它为

ABC                                XYZ
23:54  ABC                         time   $value->type
dsds                               subtype 
dsfsafsaf sdsad ad                 description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj
                                   description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj description sjgdvhgsa 
PQR                                description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj description sjgdvhgsa
time   type 
subtype 
description

应该做什么？

Answer 1

将 float:right放到第二个div而不是 float: left

当您在循环中使用时给出class而不是内联样式和css

.block {
width: 50%;
}
.block:nth-child(odd) {
float: left;
}
.block:nth-child(even) {
float: right;
}

	
        <div class="row" style="width:100%;">
        
        <div class="block">
          <div style="font-size:14px;color: #500050;">
            <p class="abc">ABC</p>
          </div>
          <div style="font-size: 12px;color: black;">
            <span>23:54</span>&nbsp;
            <span>ABC</span><br/>
            <span>dsds</span><br/>
            <span>dsfsafsaf sdsad ad</span>
          </div>
        </div>
        
        <div class="block">
          <div style="font-size:14px;color: #500050;">
            <p class="">XYZ</p>
          </div>      
          <div style="font-size: 12px;color: black;">
            <span>time </span>&nbsp;
            <span>$value->type </span><br/>
            <span>subtype </span><br/>
            <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
            <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
            <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
          </div>
        </div>
        
        <div class="block">
          <div style="font-size:14px;color: #500050;">
            <p class="">PQR</p>
          </div>      
          <div style="font-size: 12px;color: black;">
            <span>time </span>&nbsp;
            <span>type </span><br/>
            <span> subtype </span><br/>
            <span> description </span>
          </div>
        </div>