我有這個結構：
<div class="quizForm">
<div class="quizQuestions"></div>
<div class="quizQuestions"></div>
<div class="quizQuestions"></div>
<div class="quizImage"></div>
</div>
第一個之后的“quizQuestions”被隱藏，并在用戶轉到下一個問題時出現。
我想要實作的是：
quizQuestions 在列中，quizImage 在右側。
我有：
.quizForm{
display: flex;
}
.quizQuestions{
flex: 1;
flex-direction: row;
}
.quizImage{
flex: 2;
}
但是這樣，測驗問題也并排進行。
uj5u.com熱心網友回復：
您可以將其包裹quizQuestions在容器中，然后flexbox與flex-direction: column
.quizForm {
display: flex;
}
.quiz-questions-container {
display: flex;
flex-direction: column;
flex: 1;
}
.quizImage {
flex: 1;
}<div class="quizForm">
<div class="quiz-questions-container">
<div class="quizQuestions"> quizQuestions </div>
<div class="quizQuestions"> quizQuestions </div>
<div class="quizQuestions"> quizQuestions </div>
</div>
<div class="quizImage"> quizImage </div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337345.html
下一篇：如何在行的底部對齊內容