垂直对齐一组单选按钮并在必要时将其分开

Question

我一直在寻找这个问题的解决方案，但我找不到任何特别满足我要求的方法，所以如果你们能提供帮助，那就太好了！

问题是我有例如 7 个单选按钮垂直对齐 ide 一个 DIV 标签，但我想找到一种方法（例如 JavaScript 函数）来divide 它们动态地分为两组，例如左边的 4 个按钮 side 和右边的 3 个按钮。

目前，我只是通过添加另外两个 div 子标签插入 ide 父标签并将它们放在 ide 彼此之间进行硬编码，但这不会解决不了我的问题！

例如，我现在有这段代码：

.radioButtonList{ 
 width: 300px;
    margin-left: 1px;
 margin-top: 15px;
}

.radioButtonListDevidedFirst{ 
 width: 100px;
    float: left;
    height: 300px;
}

.radioButtonListDevidedSecond{ 
 width: 200px;
    float: left;
    height: 300px;
}

<div class="radioButtonList"> 
  <div class="radioButtonListDevidedFirst">
   <div class="radioItem">
  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
   <div class="radioItem">
  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
   <div class="radioItem">
  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
   <div class="radioItem">
  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
  </div>
     
  <div class="radioButtonListDevidedSecond">
   <div class="radioItem">
    <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
    <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
   <div class="radioItem">
    <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
    <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
   <div class="radioItem">
    <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
    <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
   </div>
  </div>
     
</div>

Answer 1

尝试CSS3column-count

div {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}

<div>
  <input type="radio" name="group">Option 1
  <br>
  <input type="radio" name="group">Option 2
  <br>
  <input type="radio" name="group">Option 3
  <br>
  <input type="radio" name="group">Option 4
  <br>
  <input type="radio" name="group">Option 5
  <br>
  <input type="radio" name="group">Option 6
  <br>
  <input type="radio" name="group">Option 7
  <br>
  <div>

垂直对齐一组单选按钮并在必要时将其分开

Aligning a group of radio button vertically and divide it if necessarely

html

javascript

css

jquery

radiobuttonlist