Html 如果左侧的另一个div导致右div堆叠，则垂直对齐右div

此页面左侧有问题，右侧有用于排序/分级答案的单选按钮。它的设计是，如果问题文本太长太适合左窗格，它只会继续运行，并将单选按钮按到问题文本下方的一行。我强调如果因为我想保持这种方式，所以只有当文本很长时才会移动，我不想设置固定的东西，使每个问题都做相同的事情

问题是，N/A单选按钮不像其他单选按钮那样调整。有没有办法强迫它和其他人一起下移？我试着用一个底部垂直对齐的div来包围这两个部分，但没有成功。也许我做错了什么，但无论我读过什么关于垂直对齐内div的文章，似乎都无法做到这一点。有可能解决这个问题吗

.qg{
宽度：700px；/*这仅用于演示较小的屏幕*/
填充顶部：10px；
边际上限：0；
}
.qg行{
左边距：10px；
边缘底部：10px；
溢出：自动；
}
.qg头{
垫面：5px；
垫底：5px；
背景色：#fcfc；
}
[类别*=“qg指南”]{
字体大小：11px；
最小高度：10px；
文本对齐：居中；
浮动：左；
}
[类别*=“qg右侧部分”]{
浮动：对；
宽度：500px；
}
.qg-右侧-截面图-1{
宽度：60px；
}
.qg-右侧-第5节{
宽度：300px；
}
[类别*=“qg指南-”]{
单词包装：打断单词；
}
.qg-guide-1{
空单元格：隐藏；
宽度：100%；
最小宽度：100%；
}
.qg-guide-5{
/*在移动设备中复制*/
空单元格：显示；
宽度：20%；
最小宽度：20%；
}
.qg-guide-7{
空单元格：显示；
宽度：14.28%；
最小宽度：14.28%；
}
.qg标签{
字体大小：13px；
浮动：左；
边缘底部：10px；
}
[类别*=“qg输入”]{
字体大小：11px；
宽度：60px；
文本对齐：居中；
浮动：左；
}

高7
中性的
低1
远远地，在单词“山脉”后面，远远地，远离沃卡利亚和辅音的国家。


不适用


5


4


3


2


1

高0
中性的
低4
在遥远的地方，在“山”字的后面。


不适用


5


4


3


2


1

您可以通过在

.qg标签

类后添加一个清晰的修复程序来实现想要的效果。我在小提琴中手动插入一个空的

，样式为

clear:both。您可以改为使用您喜爱的库的
clear fix
类，或创建自己的库，例如：

（这是来自的经典clearfix示例）

另一个解决方案是在同一父元素中包含所有单选按钮，给它一个固定的宽度，并添加
float:right到它和无线电元素子元素。这应该是一个简单的解决方案。我在这里展示了这一点，与您原来的小提琴相比-
您可以通过在
.qg标签
类后添加一个清晰的补丁来实现想要的效果。我在小提琴中手动插入一个空的
，样式为
clear:both。您可以改为使用您喜爱的库的
clear fix
类，或创建自己的库，例如：

（这是来自的经典clearfix示例）

另一个解决方案是在同一父元素中包含所有单选按钮，给它一个固定的宽度，并添加
float:right到它和无线电元素子元素。这应该是一个简单的解决方案。我在这里展示了这一点，与您原来的小提琴相比-
是否可以更改DOM结构？？如果是，那就试着推

内部

<div class="qg-guide qg-right-section-5">

是否可以更改DOM结构？？如果是，那就试着推

内部

<div class="qg-guide qg-right-section-5">

我不确定这是否正确，但我按照你的建议做了（），结果是，它在所有问题上都会放下单选按钮，不管它们是否并排合适。因此，在这个特殊的小提琴中，当我只希望第一个单选按钮区域更低时，两个单选按钮区域都更低（因为它的相关问题不适合没有包装的左侧）。我在两个问题中都添加了clearfix div，因为这个页面是以编程方式构建的，每个问题都使用一个模板，所以它们是相同的。我做错什么了吗？我能创造出你想要的效果。我将所有单选按钮放在同一个container div中，并将
float
更改为right，并增加了父容器的宽度。如果这不适用于标记的某些脚本输出，那么您可能需要更复杂的解决方案。这是目前我能想到的最简单的方法，你可以根据需要改变单选按钮的顺序。当我查看你的小提琴时，第一个问题中1的单选按钮被删除
        <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">&nbsp;</div>
                </div>
            </div>
        </div>

.qg-right-section-5 {
    width: 360px;
}
.qg-right-section-1 {
 width: 60px;
 float: left;
}