仅使用 css 的两列复选框布局

Question

以下代码是表单的动态生成部分，我只能使用 css 对其进行样式设置。

没有 html 变化，但类的名称除外：类 "element" 和 "formField" 因为它们被用作常见的类对于表单中的其他元素。

我正在寻找的布局是两列标签复选框。正如您在代码中看到的，我有 4 个标签复选框项目。我需要一列中的项目 0 和 1，以及它旁边的另一列中的项目 2 和 3。

我知道这些表格应该永远消失了，我同意，但请在这里帮助我，我将重新构建整个站点，但我现在还没有时间。

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

Answer 1

您可以使用 CSS float 和 clear 来做到这一点。这是一个例子。

.element{
  float:right;
}

.element:nth-child(odd){
  clear:right;
}

<div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat0" style="float:left">
                                <input type="checkbox" name="eCat0" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat1" style="float:left">
                                <input type="checkbox" name="eCat1" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat2" style="float:left">
                                <input type="checkbox" name="eCat2" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat3" style="float:left">
                                <input type="checkbox" name="eCat3" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Answer 2

如果你可以设置这四个 div 的父元素的样式，你可以设置

.parent {
    columns: 2;
}

这适用于 IE10+。 https://jsfiddle.net/c979dxLe/1/

您还可以设置列的宽度。文档：https://developer.mozilla.org/nl/docs/Web/CSS/columns

Answer 3

我为我的 parent div 中的一些 md-checkboxes 做了这个，他们 column-first 订购了！像这样：

1                                              4
2                                              5
3

CSS:

.parent {
    columns: 2;
}
.parent > * {
    width: 100%;
}

仅使用 css 的两列复选框布局

Two column checkboxes layout using just css

html

javascript

css

jquery