根据 div 中的对象数量调整 div 的内容大小
Resize the content of a div based on how many objects are in the div
我正在开发一个需要在 ColdFusion8 和 ColdFusion11 中提供报告缩略图预览的网站。共识是我们将在 xml 报告来源中搜索项目（列表、图表等），然后在缩略图中放置该元素的 png 表示形式。由于每个报告在报告项目的顺序、数量和类型上都是唯一的，我们需要一个 div 来保持相同的大小（因为它是一个弹出缩略图），但每个报告项目将根据有多少人在同一个 div。这意味着如果只有一个列表，它将占据整个 div，但如果有两个，则每个列表将恰好占据分配的 space 的 50%，依此类推。我不确定如何开始解决这个问题，所以如果我说错了树，请说出来。我看到过关于使用 css 单个背景图像动态调整大小的帖子，但是在特定的 "box" 中可能有也可能没有多个图像，唯一改变的是大小；在本例中为 png。
这是我为找到两种类型的报告项目（列表和图表）而跳过的所有喧嚣以及我当前如何显示它们：
index.cfm调用thumbs_CF8.cfc其中returnsdiv用大拇指图片返回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>
为什么不根据您需要在框中呈现多少 images/charts 来使您的标记有条件...类似于：
<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 */
}
我发现的另一个同样有效甚至可能更简单的答案是使用 Bootstrap.js。我知道我要求 css，但在尝试让对象正确排列后，我决定使用 bootstrap。在 bootstrapt 中，我正在执行以下操作：
<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 表示多少 space需要。 1 最少，12 最多。这与拇指计数相反。如果只有 1 个拇指，则数字需要为 12，但如果有 12 个或更多，则数字需要为 1。但是，这是另一个 post/day 的问题。希望这对您有所帮助！
我正在开发一个需要在 ColdFusion8 和 ColdFusion11 中提供报告缩略图预览的网站。共识是我们将在 xml 报告来源中搜索项目（列表、图表等），然后在缩略图中放置该元素的 png 表示形式。由于每个报告在报告项目的顺序、数量和类型上都是唯一的，我们需要一个 div 来保持相同的大小（因为它是一个弹出缩略图），但每个报告项目将根据有多少人在同一个 div。这意味着如果只有一个列表，它将占据整个 div，但如果有两个，则每个列表将恰好占据分配的 space 的 50%，依此类推。我不确定如何开始解决这个问题，所以如果我说错了树，请说出来。我看到过关于使用 css 单个背景图像动态调整大小的帖子，但是在特定的 "box" 中可能有也可能没有多个图像，唯一改变的是大小；在本例中为 png。
这是我为找到两种类型的报告项目（列表和图表）而跳过的所有喧嚣以及我当前如何显示它们：
index.cfm调用thumbs_CF8.cfc其中returnsdiv用大拇指图片返回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>
为什么不根据您需要在框中呈现多少 images/charts 来使您的标记有条件...类似于：
<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 */
}
我发现的另一个同样有效甚至可能更简单的答案是使用 Bootstrap.js。我知道我要求 css，但在尝试让对象正确排列后，我决定使用 bootstrap。在 bootstrapt 中，我正在执行以下操作：
<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 表示多少 space需要。 1 最少，12 最多。这与拇指计数相反。如果只有 1 个拇指，则数字需要为 12，但如果有 12 个或更多，则数字需要为 1。但是，这是另一个 post/day 的问题。希望这对您有所帮助！