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

Question

又是我!我正在动态构建字段集，因为它们的数量可能会根据数据库发生变化。以容纳页面上的相对位置。我想更改我当前的 fieldSets 设置，使其具有固定的宽度/高度，并有 2 个复选框而不是一个复选框，以查看它将如何在页面上布局。谢谢:

顺便说一句，我不擅长造型，这就是我问这个问题的原因:)

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;
}

Answer 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>