0

我有这个问题：How to change assign dynamic float to a random div's ....

这是场景：我有一个“模板”来显示来自 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 都是对齐的，并且不会在当前内容 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 个类，我认为这是最好的方法，这可能不是最好的方法，但它对我有用......

谢谢你们....

4

1 回答 1

0

浮动包含的 div 并给它们一个相对位置。然后给悬停 div 的绝对位置 left: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>

于 2013-07-30T00:44:26.403 回答