2016-04-13 5 views
-2

Ich habe nach einer Lösung für dieses Problem gesucht, aber ich konnte keine spezielle finden, die meine Anfrage erfüllt, also wäre es wirklich cool, wenn einer von euch helfen könnte!Eine Gruppe von Radiobuttons vertikal ausrichten und bei Bedarf teilen

Das Problem ist, dass ich zum Beispiel 7 Radiobuttons vertikal innerhalb eines DIV-Tags ausgerichtet habe, aber ich möchte einen Weg (eine JavaScript-Funktion zum Beispiel) dynamisch in zwei Gruppen zum Beispiel 4 Tasten auf der linken Seite zu teilen und die 3 links auf der rechten Seite.

Für jetzt, ich habe es nur hart codiert, indem Sie zwei andere div Kind-Tag innerhalb der Eltern und putted sie neben einander, aber das wird nicht mein Problem lösen!

Zum Beispiel, ich habe diesen Code jetzt:

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

+2

bitte einige relevante Code teilen, so t Wir können dir besser helfen. Teilen Sie Ihre HTML-und Skript-Code –

+0

Ich war nicht auf der Suche nach einem bereits entwickelten Code, ich fragte nur, ob jemand eine Idee oder einen Trick, der mir helfen könnte. Danke trotzdem für deine Besorgnis, aber ich hatte bereits eine Antwort. –

Antwort

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>

+0

Vielen Dank für Ihre Antwort Kumpel, das war, was ich gesucht habe! Ich wusste nicht, dass diese Attribute existieren. Du hast meinen Tag gerettet ;) –