如何构建具有固定宽度/高度的字段集2列复选框

时间:2012-02-22 16:06:20

标签: html css jsp

再次来了我!我正在动态构建字段集,因为它们的#可能会根据数据库而改变。为了适应页面上的房地产。我想将我当前设置的fieldSets更改为具有固定的宽度/高度,并且有2个coumns的复选框而不是一个,以查看它将如何在页面上布局。感谢:

BTW我不擅长造型,这就是为什么我问这个问题:)

JSP:

<c:forEach items="${FieldMap}" var="detFieldEntry">     
    <fieldset class="det">         
    <legend>${FieldEntry.key}</legend>  
    <c:forEach items="${FieldEntry.value}" var="detBean">    
         <input type="checkbox" name="fieldNames" value="${Bean.fieldName}" 
         <c:if test="${form.fieldNameMap[Bean.fieldName]}">checked="checked"   </c:if>>${Bean.displayName}</input>          
         </br>    
   </c:forEach> 
   </fieldset> 
</c:forEach>

的CSS:

table.det
{
}

table.det td
{ border: none; }

fieldset.det 
{     
display:block;
float:left;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;

}
 fieldset.det legend
{
    padding:2px 5px;
    border:2px solid #CCCCCC;
    font-weight:  bold;
}

1 个答案:

答案 0 :(得分:1)

你正在寻找这样的东西吗?查看我的fiddle并告诉我们。

也许是这样的?

print <fieldset>
print <legend>
columns = 2
offset = 0
class = "left"
count = dbResult.length() // Say 9
rows = count / columns // you want to round up to use the next whole int, so 4.5 should be 5. 
for i=0, i < columns, i++ {
    print <div class="<%=class%>"
    for k=0, k < rows, k++ {
        print <span><input>k+offset<label></span>
    }
    offset = rows
    print </div>
    class = "right"
}
print </fieldset>