定位格側與

我已經創造了一些單選按鈕，其工作在我的例子作爲內容切換單選按鈕（內容切換）側 - 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

來源

2017-08-11 Rosomal

要獲得所有卡在同一行上出現與第一種選擇，你可以使用在Flexbox的（.container）與column方向包一切，包行爲。限制.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>

舊答案：

每一卡出現在同一行對應的單選按鈕，你可以用的input，label和div每個組合在flexbox（.container元素）中：

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

來源

2017-08-11 22:38:39

非常感謝你，但有沒有對齊垂直text02，text03和text04頁面頂部的選項？我想與text01在同一個地方。 – Rosomal

回答

相關問題