Flexbox响应式的三列布局
我对三个布局列进行了一次小调查。
在桌面上看起来像这样：
我的问题是在手机屏幕上。我有一个人在另一个之下，之后又提出了问题。请参见下图。
我想要实现的是第一个人，然后是问题，第二个人，然后是问题，第三个人，然后是问题，
有人知道如何解决吗？
这是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;
}
2 个答案:
答案 0 :(得分：1)
您尝试过吗？
<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的数量是否正确，但是此版本会将每个人都放在他们的行中（在台式机和移动设备上）。
答案 1 :(得分：0)
这样在不同的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>
这可能是结构，并使用媒体查询来提高响应速度。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？