[英]Three Column Layout with Flexbox on responsive
我對三個布局列進行了一次小調查。
在桌面上看起來像這樣:
我的問題是在手機屏幕上。 我有一個人在另一個之下,之后又提出了問題。 參見下圖。
我想要實現的是第一個人,然后是問題,第二個人,然后是問題,第三個人,然后是問題,如下所示:
有誰知道如何解決這個問題?
這是HTMl:
<div class="col-md-12 col-xs-12">
<div class="d-table">
<div class="d-table-row">
<div class="d-table-cell align-middle"></div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 1</div>
</div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 2</div>
</div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 3</div>
</div>
</div>
<div class="d-table-row">
<div class="d-table-cell align-middle pb-4">
<div class="question">
<div class="smalltitle">
<span class="prefiks">1</span>
<span>This is a very nice question</span>
</div>
</div>
</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No answer</div>
</div>
</div>
</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No Answer</div>
</div>
</div>
</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No answer</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.d-table {
display: table!important;
}
.d-table-row {
display: table-row !important;
}
* {
-webkit-font-smoothing: antialiased;
}
*, ::after, ::before {
box-sizing: inherit;
}
.d-table-cell {
display: table-cell!important;
}
.align-middle {
vertical-align: middle!important;
}
.align-middle > div {
margin-right: 50px;
}
.titleMiddle {
font-weight: 700;
margin-bottom: 30px;
}
.pb-4, .py-4 {
padding-bottom: 1.5rem!important;
}
.smalltitle {
margin-bottom: 20px;
}
.horizontal {
display: flex !important;
flex-direction: row !important;
}
.answer {
margin-left: 15px;
margin-bottom: 5px;
padding: 6px;
}
.answerRight {
display: flex !important;
flex-direction: row !important;
align-items: center;
}
input[type='radio'] {
width: 13px;
height: 13px;
background: white;
border-radius: 50%!important;
border: 1px solid #343c49;
-moz-appearance: none;
-webkit-appearance: none;
}
input[type='radio']:checked {
background: #06c;
}
.answerText {
margin-left: 0.375rem;
}
你有嘗試過嗎?
<div class="col-md-12 col-xs-12">
<div class="d-table">
<div class="d-table-row">
<div class="d-table-cell align-middle">This is a very nice question</div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 1</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No answer</div>
</div>
</div>
</div>
</div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 2</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No answer</div>
</div>
</div>
</div>
</div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 3</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No answer</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
或為每個人使用一個class =“ d-table-row”,其答案如下:
<div class="col-md-12 col-xs-12">
<div class="d-table">
<div class="d-table-row">
<div class="d-table-cell align-middle">This is a very nice question</div>
<div class="d-table-cell align-middle">
<div class="titleMiddle">Person 1</div>
<div class="d-table-cell align-middle pb-4">
<div class="horizontal">
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="1">
</div>
<div class="answerText">1</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="2">
</div>
<div class="answerText">2</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="3">
</div>
<div class="answerText">3</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="4">
</div>
<div class="answerText">4</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="5">
</div>
<div class="answerText">5</div>
</div>
<div class="answer answerRight">
<div class="answerInput">
<input type="radio" name="name" value="6">
</div>
<div class="answerText">No answer</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我不確定封閉div的數量是否正確,但是此版本會將每個人都放在他們的行中(在台式機和移動設備上)。
這樣使不同的div中的其他人
.d-flex{ display: flex; } .row{ flex-direction: row; } .col{ flex-direction: column; }
<div class="d-flex row"> <div class="d-flex col"> <div>Person 1</div> <div class=" d-flex row"> <span>Q1</span> <div> <input type="radio" name="q1" value="1" > <span >1</span> </div> <div> <input type="radio" name="q2" value="2"> <span >2</span> </div> <div> <input type="radio" name="q3" value="3"> <span >3</span> </div> </div> </div> <div class="d-flex col"> <div>Person 1</div> <div class=" d-flex row"> <span>Q1</span> <div> <input type="radio" name="q1" value="1" > <span >1</span> </div> <div> <input type="radio" name="q2" value="2"> <span >2</span> </div> <div> <input type="radio" name="q3" value="3"> <span >3</span> </div> </div> </div> </div>
這可能是結構,並使用媒體查詢來提高響應能力。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.