此页面左侧有问题,右侧有用于排名/缩放答案的单选按钮。它的设计使得如果问题文本太长而无法放在左 Pane 中,它会继续前进并将单选按钮向下推到问题文本下方的一行。我强调 if 是因为我想保持这种状态,所以只有当文本很长时它才会移动,我不想设置一些固定的东西以便每个问题都做同样的事情。
问题是,N/A 单选按钮不像其他单选按钮那样调整。有没有办法强制它和其他人一起下移?我试过用底部垂直对齐的 div 围绕这两个部分,但这没有用。也许我做错了什么,但无论我读过关于垂直对齐内部 div 的内容,似乎都无法做到这一点。有可能解决这个问题吗?
https://jsfiddle.net/x5y49d0n/
.qg {
width: 700px; /* this is only to demonstrate a smaller screen */
padding-top: 10px;
margin-top: 0;
}
.qg-row {
margin-left: 10px;
margin-bottom: 10px;
overflow: auto;
}
.qg-head {
padding-top: 5px;
padding-bottom: 5px;
background-color: #fcfcfc;
}
[class*="qg-guide"] {
font-size: 11px;
min-height: 10px;
text-align: center;
float: left;
}
[class*="qg-right-section"] {
float: right;
width: 500px;
}
.qg-right-section-1 {
width: 60px;
}
.qg-right-section-5 {
width: 300px;
}
[class*="qg-guide-"] {
word-wrap: break-word;
}
.qg-guide-1 {
empty-cells: hide;
width: 100%;
min-width: 100%;
}
.qg-guide-5 {
/* replicate in mobile */
empty-cells: show;
width: 20%;
min-width: 20%;
}
.qg-guide-7 {
empty-cells: show;
width: 14.28%;
min-width: 14.28%;
}
.qg-label {
font-size: 13px;
float: left;
margin-bottom: 10px;
}
[class*="qg-input"] {
font-size: 11px;
width: 60px;
text-align: center;
float: left;
}
<div class="qg">
<div class="qg-table">
<div class="qg-row qg-head">
<div class="qg-guide-label"></div>
<div class="qg-guide qg-right-section-1">
<div class="qg-guide-1"> </div>
</div>
<div class="qg-guide qg-right-section-5">
<div class="qg-guide-7">High7</div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7">Neutral4</div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7">Low1</div>
</div>
</div>
<div class="qg-row">
<div class="qg-label">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</div>
<div class="qg-guide qg-right-section-1">
<div class="qg-input-1">
<input type="radio" name="0LoMVa" value=""><br>
N/A<br>
</div>
</div>
<div class="qg-right-section-5">
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="5"><br>5<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="4"><br>4<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="3"><br>3<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="2"><br>2<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="1"><br>1<br></div>
</div>
</div>
</div>
</div>
<div class="qg">
<div class="qg-table">
<div class="qg-row qg-head">
<div class="qg-guide-label"></div>
<div class="qg-guide qg-right-section-1">
<div class="qg-guide-1"> </div>
</div>
<div class="qg-guide qg-right-section-5">
<div class="qg-guide-5 qg-guide-item-0">High0</div>
<div class="qg-guide-5 qg-guide-item-1"></div>
<div class="qg-guide-5 qg-guide-item-2">Neutral2</div>
<div class="qg-guide-5 qg-guide-item-3"></div>
<div class="qg-guide-5 qg-guide-item-4">Low4</div>
</div>
</div>
<div class="qg-row">
<div class="qg-label">Far far away, behind the word mountains.</div>
<div class="qg-guide qg-right-section-1">
<div class="qg-input-1">
<input type="radio" name="W1MkXk" value=""><br>
N/A<br>
</div>
</div>
<div class="qg-right-section-5">
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="5"><br>5<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="4"><br>4<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="3"><br>3<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="2"><br>2<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="1"><br>1<br></div>
</div>
</div>
</div>
</div>
这是我想要它做的:
此外,这些问题是使用模板以编程方式创建的,因此使用的 div 必须相同,IOW 我无法在没有第二个问题的情况下将 div(带有附加类)添加到解决问题的第一个问题有相同的分区。这是使我很难找到解决方案的关键要求。这个能解决吗?
最佳答案
是否可以更改 DOM 结构?如果是,那么就尝试插入
<div class="qg-guide qg-right-section-1"></div>
里面
<div class="qg-guide qg-right-section-5">
代码
<div class="qg-row qg-head">
<div class="qg-guide-label"></div>
<div class="qg-guide qg-right-section-5">
<div class="qg-guide-5 qg-guide-item-0">High0</div>
<div class="qg-guide-5 qg-guide-item-1"></div>
<div class="qg-guide-5 qg-guide-item-2">Neutral2</div>
<div class="qg-guide-5 qg-guide-item-3"></div>
<div class="qg-guide-5 qg-guide-item-4">Low4</div>
<div class="qg-guide qg-right-section-1">
<div class="qg-guide-1"> </div>
</div>
</div>
</div>
改变CSS
.qg-right-section-5 {
width: 360px;
}
.qg-right-section-1 {
width: 60px;
float: left;
}
关于html - 如果左侧的另一个 div 导致它们堆叠,则垂直对齐右侧的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36251497/