html - 为什么这个 div 在有足够空间的情况下不与其他 div 内联？

Question

这是我元素的 fiddle https://jsfiddle.net/Optiq/65rddhu4/

如果您查看右侧标有“Strongest”的标签，您会发现它甚至位于其所在的 div 下方。我最初让 div 的宽度变窄了，但即使我将它展开，它仍然停留在底部。

我知道解决它的一种方法是使用 CSS 添加位置属性以将其强制到我想要的位置，但根据我定位此类内容的经验，它可能在一个浏览器中看起来正确但可能400px 在不同的浏览器中。为什么会这样？

这是 HMTL

                <div class="texfrm_o" style="height:128px;">
                <div class="texfrm_i" style="width:99%; height:128px; margin:auto;"><br />
                    <label class="label_02" style="width:77%; text-align:center; margin:auto;">Generating Ideas</label><br />
                    <div class="anscont">
                        <div class="r_cont_lab" style="float:left; margin-left:4px;">
                            Weakest
                        </div>

                        <div class="radcont">
                            <div class="radbox">
                                <label for="q7a1" class="rad_lab">1</label>
                                <input type="radio" class="rad_buttn2" value="1" name="Generating Ideas" id="q7a1">
                            </div>

                            <div class="radbox">
                                <label for="q7a2" class="rad_lab">2</label>
                                <input type="radio" class="rad_buttn2" value="2" name="Generating Ideas" id="q7a2">
                            </div>

                            <div class="radbox">
                                <label for="q7a3" class="rad_lab">3</label>
                                <input type="radio" class="rad_buttn2" value="3" name="Generating Ideas" id="q7a3">
                            </div>

                            <div class="radbox">
                                <label for="q7a4" class="rad_lab">4</label>
                                <input type="radio" class="rad_buttn2" value="4" name="Generating Ideas" id="q7a4">
                            </div>

                            <div class="radbox">
                                <label for="q7a5" class="rad_lab">5</label>
                                <input type="radio" class="rad_buttn2" value="5" name="Generating Ideas" id="q7a5">
                            </div>

                            <div class="radbox">
                                <label for="q7a6" class="rad_lab">6</label>
                                <input type="radio" class="rad_buttn2" value="6" name="Generating Ideas" id="q7a6">
                            </div>

                            <div class="radbox">
                                <label for="q7a7" class="rad_lab">7</label>
                                <input type="radio" class="rad_buttn2" value="7" name="Generating Ideas" id="q7a7">
                            </div>

                            <div class="radbox">
                                <label for="q7a8" class="rad_lab">8</label>
                                <input type="radio" class="rad_buttn2" value="8" name="Generating Ideas" id="q7a8">
                            </div>

                            <div class="radbox">
                                <label for="q7a9" class="rad_lab">9</label>
                                <input type="radio" class="rad_buttn2" value="9" name="Generating Ideas" id="q7a9">
                            </div>

                            <div class="radbox">
                                <label for="q7a10" class="rad_lab">10</label>
                                <input type="radio" class="rad_buttn2" value="10" name="Generating Ideas" id="q7a10">
                            </div>

                        </div>

                        <div class="r_cont_lab" style="float:right; margin-right:4px;">
                            Strongest
                        </div>

                    </div><!--anscont-->
                </div><!--texfrm_i-->
            </div><!--texfrm_o-->

这是使用它的 CSS 元素

.texfrm_o{
    width:77%;
    /*background-color:#006;*/
    display:block;
    margin:auto;
    }

.texfrm_i{
    border-radius:11px;
    display:block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(24%,#cecece), color-stop(67%,#cecece), color-stop(67%,#f2f2f2), color-stop(67%,#cecece), color-stop(100%,#828282)); /* Chrome,Safari4+ */
    box-shadow:#383838 0px 11px 5.6px;
    }
.label_02{
    width:88%;
    height:22px;
    display:block;
    font-family:'Oswald', sans-serif;
    font-size:12pt;
    background-color:#c9fffb;
    color:#489c7f;
    box-shadow:#8fd7d2 0px 0px 33px;
    border-radius:2.2px;
    }

.r_cont_lab{
    background-color:#CC9;
    width:88px;
    height:22px;
    font-size:8pt;
    text-align:center;
    font-family:'Roboto', sans-serif;
    font-size:11pt;
    }

.radcont{
    width:400px;
    height:55px;
    background-color:#096;
    margin:auto;
    display:block;
    }

.radbox{
    width:40px;
    height:55px;
    float:left;
    display:block;
    background-color:#CC9;
    }

.anscont{
    background-color:#390;
    width:666px;
    height:55px;
    margin:auto;
    display:block;
    }

Answer 1

这是您想要的结果吗？

https://jsfiddle.net/Optiq/65rddhu4/ http://i.stack.imgur.com/sscyC.png

我所做的改变是移动你的
<div class="r_cont_lab" style="float:right; margin-right:4px;">Strongest</div>
block 在另一个div之上，这样它就像你想要的那样添加它(我希望)