根据div中有多少个对象调整div的内容大小

Question

我正在一个需要在ColdFusion8和ColdFusion11中给出报告的缩略图预览的网站上工作。我们的共识是，我们将搜索项目（列表，图表等）的报告的xml源，然后在缩略图中放入该元素的png表示。由于每个报表的顺序，编号和报表项类型都是唯一的，因此我们需要有一个保持相同大小的div（因为它是弹出式缩略图），但每个报表项都将根据其他人的数量调整大小在同一个div中。意思是如果只有一个列表，它将占用整个div，但是如果两个然后每个将占用该空间的50％，依此类推。我不知道如何开始解决这个问题，所以如果我吠叫错了树，请说出来。我已经看到动态调整大小与CSS单个背景图像的帖子，但没有多个图像可能会或可能不会在一个特定的“框”，唯一改变的是大小的;在这种情况下，PNG。

这里的是我通过跳跃找到两种类型的报表项目的所有喧闹（列表和图表），以及如何即时通讯目前显示它们：

的index.cfm调用返回div中thumbs_CF8.cfc用拇指图像回index.cfm

thumbs_CF8.cfc: 

... 
<!--- script to search and parse out items in order of xml doc ---> 
<cfscript> 



listInXml=ArrayNew(2);  


listInXml = XmlSearch(cleanedXml,"//node()[ local-name()='listColumns' or local-name()='combinationChart' or local-name()='dataSource'] ");  

    for (i = 1; i LTE ArrayLen(listInXml); i = i + 1) 
    try{ elementsList[i][1] = (listInXml[i].XmlName); } catch (any e) {elementsList[i][1] = 'noName';} 


     for (i = 1; i LTE ArrayLen(listInXml); i = i + 1) 
    try{ elementsList[i][2] = (listInXml[i].XmlAttributes['name']); } catch (any e) {elementsList[i][2] = 'noXmlAttrib-Name';} 




</cfscript> 



<!--- loop to output pngs based on the elementsList ---> 

<cfset thumbsBuckets = arrayNew(1)> 

<cfloop index=i from="1" to="#arrayLen(elementsList)#" > 

       <cfloop index=j from=1 to=2> 
        <cfset myArray[i][1] = #elementsList[i][1]# > 
        <cfset myArray[i][2] = #elementsList[i][2]# > 
       </cfloop> 


        <cfif Find("listColumns",myArray[i][1])> 


         <cfset thumbsBuckets[i] = '<img tabindex="0" class="image" src="#Application.basepath#/images/list-icon.png" style="height: 46px; width:46px;">' > 

         <!--- labels for icons 
         <cfif Find("noXmlAttrib-Name",myArray[i][2])> 
          #myArray[i][1]#</br> 
         <cfelse> 
          #myArray[i][2]#</br> 
         </cfif> ---> 


        <cfelseif Find("combinationChart",myArray[i][1])> 


         <cfset thumbsBuckets[i] = '<img tabindex="0" class="image" src="#Application.basepath#/images/Bar-chart-icon.png" style="height: 46px; width:46px;">' > 

         <!--- 
         <cfif Find("noXmlAttrib-Name",myArray[i][2])> 
          #myArray[i][1]#</br> 
         <cfelse> 
          #myArray[i][2]#</br> 
         </cfif> 
          ---> 


        <cfelse> 

         <cfset thumbsBuckets[i] = 'no icon'> 

         <!--- I didn't find a icon for #name# </br> ---> 

        </cfif> 



    </cfloop> 


<!--- div bucket to put the thumbs into ---> 
              <div > 

                <cfloop index=i from="1" to="#arrayLen(thumbsBuckets)#" > 


                 <cfif #thumbsBuckets[i]# NEQ 'no icon'> 
                 #thumbsBuckets[i]# 
                 <cfelse> 

                 </cfif> 


                </cfloop> 

               </div> 

Index.cfm: 
<!--- index.cfm where the div thumbs bucket comes back to get displayed ---> 

                   <div style="width:50%; height:30%"><!------ thumbs section - under construction ---------------------> 



                      <div class="thumbsItemRow"> 

                       <cfset xmlToParse = #reportResults.REPORT_XML# > 


                       <cftry> 

                       <cfinvoke component="#thumbObj#" method="makeXML" reportTitle="#reportResults.COG_REPORT_TITLE#" numVersion="#numVersion#" xmlToParse="#xmlToParse#" returnvariable="thumbs"> 

                       <cfcatch>No thumbs!</cfcatch> 

                       </cftry> 

                      </div> 


                   <!------ end thumbs section ---------------------> </div> 

                  </div> 

Answer 1

为什么不把你的加价条件基础上，你需要多少图像/图框中呈现......是这样的：

<div class="chart-container num-charts-#arrayLen(myData.charts)#"> 

    <cfloop from="1" to="#arrayLen(myData.charts)#" index="i"> 

    <div class="chart-item-container"> 
     <img src="#myData.charts[i].imgPath#"> 
    </div> 

    </cfloop> 

</div> 

，然后有一些CSS：

.chart-item-container { 
    width: 100%; /* default width */ 
} 

.num-charts-1 .chart-item-container { 
    width: 100%; 
} 

.num-charts-2 .chart-item-container { 
    width: 50%; 
} 

.num-charts-3 .chart-item-container { 
    width: 33.3333%; 
} 

.chart-item-container img { 
    max-width: 100%; /* ensure image stretches to fill available space */ 
} 

Answer 2

另一样有效，甚至可能更容易一些答案，我发现是使用Bootstrap.js。我知道我问过css，但在尝试让对象正确排列后，我决定采用引导。在bootstrapt Im做以下几点：

<div class="table-responsive"> 
           <table> 
            <tbody> 
             <div class="container-fluid"> 
              <div class="row-fluid"> 
               <!--- notes: 
                Bootstrap allows for the classes container-fluid, row-fluid,and col-md-# 
                to combine to allow the icons to resize based on how many there are and 
                to wrap onto a row of 1-12 evenly sized images. The mdSize is taking the 
                total count of thumbs and transforming it to a even divisor of 12. 
                In order for the wrapping to work each image width must be the same. 
                ---> 

                <cfset thumbArraySize = #arrayLen(thumbsBuckets)# > 

                <cfset mdSize = (Int(round(#thumbArraySize#*12)/12)/12) > 

                <cfloop index=i from="1" to="#arrayLen(thumbsBuckets)#" > 


                 <div class="col-md-#mdSize# chart-item-container" > 
                  <cfif #thumbsBuckets[i]# NEQ 'no icon'> 
                  #thumbsBuckets[i]# 
                  <cfelse> 

                  </cfif> 
                 </div> 




                </cfloop> 

               </div> 
             </div> 


            </tbody> 

           </table> 
           </div> 

现在唯一的麻烦越来越未知数量的拇指图标甚至表达出来12，使得任何数量少于12将被转换为1-12代表它需要多少空间。 1是最少的，12是最多的。这与拇指的数量相反。如果只有一个拇指，则该数字需要为12，但如果有12个或更多，则该数字将需要为1.但是，这是另一个帖子/日期的问题。希望这可以帮助！