如果另一个 div 向左导致它们堆叠，则垂直对齐右 divs

Question

此页面左侧有问题，右侧有 ranking/scale 个答案的单选按钮。它的设计使得 if 问题文本太长太适合左窗格它只是继续前进并将单选按钮向下推到问题文本下方的一行。我强调了 if 因为我想保持这种方式，所以只有当文本很长时它才会移动，我不想设置一些固定的东西以便每个问题都做同样的事情。

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

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">&nbsp;</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">&nbsp;</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（额外的 class) 解决问题的第一个问题，而第二个问题没有相同的 div。这是使我很难找到解决方案的关键要求。这个能解决吗？

Answer 1

在.qg-labelclass后面加一个clear-fix就可以达到你想要的效果。我在 fiddle 中通过手动插入样式为 clear:both; 的空 <div> 来完成此操作。您可以改为使用您最喜欢的库的 clear-fix class 或创建您自己的库，例如：

（这是来自 this answer 的 classic clearfix 示例）

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

另一个解决方案是将所有单选按钮包含在同一个父元素中，给它一个固定的宽度，并向它和单选元素子元素添加 float:right;。这应该是一个简单的修复。我在此处将此与您原来的 fiddle 进行了比较 - fiddle.

Answer 2

是否可以更改 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">&nbsp;</div>
                </div>
            </div>
        </div>

并更改 css

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

如果另一个 div 向左导致它们堆叠，则垂直对齐右 divs

Vertically align right divs if another div to the left causes them to stack

html

css

vertical-alignment