使用单选按钮（内容切换器）并排定位div

Question

我创建了一些单选按钮，在我的示例中作为内容切换器工作 - https://jsfiddle.net/026tbk13/29/

<input type="radio" name="switch" id="card1switch" checked />
<label for="card1switch">Option 01</label>
<br/>
<input type="radio" name="switch" id="card2switch" />
<label for="card2switch">Option 02</label>
<br/>
<input type="radio" name="switch" id="card3switch" />
<label for="card3switch">Option 03</label>
<br/>
<input type="radio" name="switch" id="card4switch" />
<label for="card4switch">Option 04</label>

<div class="card" id="card1">
    <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p>
    <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p>
    <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p>
</div>

<div class="card" id="card2">
    <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p>
    <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p>
    <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p>
</div>

<div class="card" id="card3">
    <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p>
    <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p>
    <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p>
</div>

<div class="card" id="card4">
    <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p>
    <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p>
    <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p>
</div>

和CSS：

 .card{
   display: block;
   padding: 20px 0;
   display: none;
   margin: 20px 0 0;
   border-radius: 6px;
 }

 #card1switch:checked ~ #card1,
 #card2switch:checked ~ #card2,
 #card3switch:checked ~ #card3,
 #card4switch:checked ~ #card4{
   display: block;
 }

现在，文本在单选按钮下方可见，我想要实现的是将其放在右侧（与按钮并排）。

非常感谢您的帮助！

此致，Roso

Answer 1

要使所有卡与第一个选项显示在同一行上，您可以使用包含column方向和包装行为的Flexbox（ .container ）中的所有内容。 限制.container的高度以使卡片显示在第二列上。

该列使单选按钮和标签显示在不同的行上。 为了防止这种情况，我们将隐藏单选按钮，并使用径向渐变在标签上创建自定义单选按钮。

 .containter { display: flex; flex-direction: column; height: 100px; flex-wrap: wrap; } .containter>input { position: absolute; left: -1000px; } .containter>input:checked + label { background: radial-gradient(circle at center, #666666 0, #666666 4px, #dedede 4px, #dedede 5px, #a6a6a6 5px, #a6a6a6 6px, transparent 6px) no-repeat; background-size: 12px 12px; background-position: 2px center; } .containter>label { padding: 0 0 0 20px; background: radial-gradient(circle at center, #dedede 0, #dedede 5px, #a6a6a6 5px, #a6a6a6 6px, transparent 6px) no-repeat; background-size: 12px 12px; background-position: 2px center; } .card { display: block; display: none; margin: 0 0 0 10px; border-radius: 6px; } .card>p { margin-top: 0; } #card1switch:checked~#card1, #card2switch:checked~#card2, #card3switch:checked~#card3, #card4switch:checked~#card4 { display: block; } 

 <div class="containter"> <input type="radio" name="switch" id="card1switch" checked /> <label for="card1switch">Option 01</label> <input type="radio" name="switch" id="card2switch" /> <label for="card2switch">Option 02</label> <input type="radio" name="switch" id="card3switch" /> <label for="card3switch">Option 03</label> <input type="radio" name="switch" id="card4switch" /> <label for="card4switch">Option 04</label> <div class="card" id="card1"> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> </div> <div class="card" id="card2"> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> </div> <div class="card" id="card3"> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> </div> <div class="card" id="card4"> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> </div> </div> 

老答案 ：

要使每张卡看起来位于相应单选按钮的同一行，您可以在flexbox（ .container元素）中包装input ， label和div每个组合：

 .containter { display: flex; align-items: flex-start; margin: 0 0 10px; } .containter>input { margin: 1px 5px 0 0; } .card { display: block; display: none; margin: 0 0 0 10px; border-radius: 6px; } .card>p { margin: 0; } #card1switch:checked~#card1, #card2switch:checked~#card2, #card3switch:checked~#card3, #card4switch:checked~#card4 { display: block; } 

 <div class="containter"> <input type="radio" name="switch" id="card1switch" checked /> <label for="card1switch">Option 01</label> <div class="card" id="card1"> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> </div> </div> <div class="containter"> <input type="radio" name="switch" id="card2switch" /> <label for="card2switch">Option 02</label> <div class="card" id="card2"> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> </div> </div> <div class="containter"> <input type="radio" name="switch" id="card3switch" /> <label for="card3switch">Option 03</label> <div class="card" id="card3"> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> </div> </div> <div class="containter"> <input type="radio" name="switch" id="card4switch" /> <label for="card4switch">Option 04</label> <div class="card" id="card4"> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> </div> </div>