Question

这是我的项目https://jsfiddle.net/Optiq/65rddhu4/

的小提琴

如果你看右边的标签上写着＆＃34; Strongest＆＃34;你会发现它甚至位于它所包含的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>
阻止在另一个div之上，这样它就像你想要的那样添加它（我希望）

Answer 2

我改变了你的小提琴中的以下一行。

工作检查以下小提琴

https://jsfiddle.net/dvwuxvaa/

我在HTML部分中更改了这一行，以获得最弱的标签

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

并更改了以下

的css显示属性

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

让我知道它是否有用

Answer 3

只需删除高度：55px; '.radcont'课程，然后您的radcont类代码变为如下。

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

https://jsfiddle.net/65rddhu4/2/

当有足够的空间时，为什么这个div不与其他人一致？

3 个答案: