Могу ли я использовать селекторы, чтобы контролировать этот флажок взломать divs?

Question

У меня есть очень простой флажок, который я использую для выбора различных предметов.Он делает именно то, что я хочу: а именно, нажав на ярлык, я могу выбрать соответствующий рисунок:

input[type="checkbox"] { display:none; }

.wrap { width: 50%; }
.wrap label { display: inline-block;}

.checker {background: red; padding: 50px;}
.checker figure { margin: 10px; display: inline-block; position: relative;}

.wrap input { display: none; }
.wrap input:checked ~ .checker { display: none; }

.wrap input:checked + label { color: blue; }

.wrap #check1cont:checked ~ .check1 {display: inline-block;}
.wrap #check2cont:checked ~ .check2 {display: inline-block;}

<div class="wrap">
  

	<input type="checkbox" name="cont" id="check1cont">
	<label class="check1cont" for="check1cont">Check 1</label>

	<input type="checkbox" name="controllers" id="check2cont">
	<label class="check2cont" for="check2cont">Check 2</label>



<figure class="checker check1">CHECK 1</figure>

<figure class="checker check2">CHECK 2</figure>
  
</div>

Но я хочу, чтобы контроллеры / метки были выровнены с левой стороны, а цифры - справа.В идеале я хотел бы иметь возможность делать это с помощью flex, поэтому метки размещаются в адаптивном, выровненном по левому краю div.

Я пробовал добавлять div с разными селекторами дочерних и дочерних элементов, ноЯ новичок во всем этом, и я не думаю, что я получил правильную комбинацию (или я делаю что-то еще неправильно, или иначе это невозможно).

Кто-нибудь может порекомендовать способ сделать это?

Заранее спасибо.

Answer 1

Трюки со скрытыми флажками работают, потому что сами флажки могут быть где угодно по отношению к меткам.Поэтому сначала поставьте флажки, а за ними следуют метки в отдельном контейнере, и вы можете контролировать как метки, так и рисунки с помощью флажка: флажок.

.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}

.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}

.wrap input { display: none; }
input:checked ~ main .checker { display: none; }

#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }

#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}

<div class="wrap">

  <input type="checkbox" name="cont" id="check1cont">
  <input type="checkbox" name="controllers" id="check2cont">
  
  <aside>
    <label class="check1cont" for="check1cont">Check 1</label>
    <label class="check2cont" for="check2cont">Check 2</label>
  </aside>
  
  <main>
    <figure class="checker check1">CHECK 1</figure>
    <figure class="checker check2">CHECK 2</figure>
  </main>
</div>

Примечание: как было отмечено в комментариях, код является упрощением реального кода, поэтому мне пришлось немного очистить CSS.Возможно, вам придется убрать его, чтобы он снова работал для реального кода!