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>

如何在浮动时根据其他div调整div高度和宽度

1 个答案: