根据父DIV宽度动态浮点对齐DIV

Question

我有这个问题：如何将动态浮点数赋给随机div的....

这是场景： 我有一个“模板”来显示来自SQL的数据... 所以这是基本模板：

<div class="row">
    <div class="contentData">
    <div class="imageItem>
     <img src="myimage/<?php echo $pathsIMG.'.jpg'; ?> />
       <div class="hoverData">
         <div class="hoverContainerData>
            <div class="moreClasses">More div's that contain the related information</div>
         </div>
       </div>
</div> </div> </div>

所以直到现在一切都“好”但我想得到的是以下效果：

实际效果：

我想要的：

那么如何根据父div的位置让子div的效果对齐...

谢谢。

我应该在开始时解释这个抱歉... 在我转储数据之前我有一个foreach .. 我有一个单独的块，使用带数组数据的foreach重复它

所以我做的是添加一个计数器 以下不是实际的代码，而是给你一个想法...

$sc = 1;
foreach ( -ARRAY- ) {
<!-- div's to display my template -->
<div> Data </div>
<!-- End data dump with template -->
}

所以我做的是在计数器中添加一个if，这样我就可以得到一个不同的类

<!-- div's to display my template -->
<div <?php if($sc=4){echo 'class="cols_'.$sc; $sc=1;}else {echo 'cols_'.$sc; $sc++ ?>> Data </div>
<!-- End data dump with template -->

这样我就得到了cols_1，cols_2，cols_3，现在我有了这个课程，我可以根据自己的喜好对每个课程进行设置，并将它们放在我想要的任何地方...... 由于我只需要3个课程，我认为这是最好的方法，它可能不是最好的方法，但它对我有用...

谢谢大家....

Answer 1

浮动包含的div并给它们一个相对位置。然后给悬停div一个左边的绝对位置：0px

<div class="row">
<div class="contentData" style="float:left;position:relative;">
<div class="imageItem">
 <img src="myimage/img.jpg' width="100" height="40" style="width:100px;height:40px;" />
   <div class="hoverData">
     <div class="hoverContainerData" style="position:absolute;left:0px;width:200px;background-color:red;">
        <div class="moreClasses">More div's that contain the related information</div>
     </div>
   </div>
</div> 
</div> 
<div class="contentData" style="float:left;position:relative;">
<div class="imageItem">
 <img src="myimage/img.jpg' width="100" height="40" style="width:100px;height:40px;" />
   <div class="hoverData">
     <div class="hoverContainerData" style="position:absolute;left:0px;width:200px;background-color:yellow;">
        <div class="moreClasses">More div's that contain the related information</div>
     </div>
   </div>
</div> 
</div> 
<div class="contentData" style="float:left;position:relative;">
<div class="imageItem">
 <img src="myimage/img.jpg' width="100" height="40" style="width:100px;height:40px;" />
   <div class="hoverData">
     <div class="hoverContainerData" style="position:absolute;left:0px;width:200px;background-color:blue;">
        <div class="moreClasses">More div's that contain the related information</div>
     </div>
   </div>
</div> 
</div>