javascript - 仅使用 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>