浮動小数点時のdivの高さと幅の調整方法

Question

次のdivを現在のdivの右に表示し、別のdivを下または次の行に表示したいので、プロパティ浮動小数点を持つ複数のdivと幅50％それは、このまで細かい作業が、2番目のdivの高さは、最初のdivの最初を超えている場合に表示され第二のdivと第三のdivに等しいその高さを調整している

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

（私は、foreachループでそれを印刷しています）最初の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

は、第二のdivの代わりfloat: left

にfloat:rightを与えるあなたもmasonaryを使用する必要がある代わりに、インラインスタイル及びこのためcss

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

\t 
 

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