Umiejscowienie diva w divie

Question

Witam, posiadam ten kod: 
http://codepen.io/anon/pen/zqKvbG
I mam dwa pytania:

1. Co zrobić, żeby te img były pod sobą w równej linii, tj:

2. Co zrobić, żeby checkbox "radio" zachowywał się tak, że po kliknięciu w jeden ten drugi się odznacza, w obecnej chwili można zaznaczyć dwa na raz, a tak nie powinno być w "radio"...
 

Answer 1

1. Najlepiej zrobić to używając flexboxa. Na skróty to wkładasz img i label w jednego diva, dajesz mu display: flex oraz align-items: center. Gotowe.
Tu masz twój przykład [z flexboxem] http://codepen.io/Ivanowski/pen/YqGwKx?editors=1100
Więcej na temat flexbox'a https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

Dzięki wielkie, flex to faktycznie dobre rozwiązanie tego problemu. :) A masz jeszcze jakiś pomysł  z tym checkboxem?

Answer 2

                        <div class="kolorydiv">
                <img class="image" src="http://puu.sh/nE1CY/0e28aa34e9.png"  />
             
                <label class="box"><input type="radio" value="test2"/> CZERWONY</label>
              <div class="clear"></div>
                <img class="image" src="http://puu.sh/nE1Bn/c9ad82d7e2.png" />

                <label class="box"><input type="radio" value="test1"/> CZARNY</label>
                        </div>

---

.kolorydiv{
width: 66%;
background: #303030;
margin:0 auto;}

.box{vertical-align: 50%;}

 

a co Ci chodzi z tymi inputami ?

Comments

Input ma działać tak, że jak się zaznaczy jeden to nie można drugiego naraz, tylko ten pierwszy się odznacza a zaznacza drugi.

---

Ale to tak normalnie dziala...

<label><input name="test" type="checkbox">Option 1</label>
<label><input name="test" type="checkbox">Option 2</label>
<label><input name="test" type="checkbox">Option 3</label>
<br />
<label><input name="test2" type="radio">Option 1</label>
<label><input name="test2" type="radio">Option 2</label>
<label><input name="test2" type="radio">Option 3</label>

---

Dobra, nie ważne, błąd był w "name".

---

A rzeczywiscie nie dziala Ci to, przeoczylem w codepen bo kliknalem tylko w 1 - name musisz miec ustawione takie samo wszedzie.