ラジオボタンのグループを垂直に整列させ、必要に応じて分割します

Question

私はこの問題の解決策を探していましたが、特に私の要求を満たすことができませんでしたので、

問題は、たとえばDIVタグ内に垂直方向に7つのラジオボタンが配置されていることですが、左側の4つのボタンのように動的に2つのグループに分割する方法（JavaScript関数など） 3は右側に残っています。

今のところ、私はちょうど2つの他のdivの子タグを親の中に追加してコード化してお互いの隣に置いていますが、これは私の問題を解決しません！

例えば、私は今、このコードを持っている：

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

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

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

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

Answer 1

するTry CSS3 column-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>