Question

我希望这些放射性物体悬停在divs topchoice和bottomchoice上。我将改变div“choicefirstleft”和“choicesecondleft”的宽度，可能会发生宽度实际上达到100％。正如你在jsfiddle的例子中看到的那样，一旦宽度接近100％，无线电按钮就会向下移动......

我怎样才能实现这些按钮在彩色div上？我没有线索。

HTML：

<div id="results">
    <div id="topchoice">
        <div class="result">
            <?php echo $topresult; ?>
        </div>
        <div id="choicefirstleft">
            <label for="yes">Ja</label>
        </div>
        <input type="radio" id="yes" value="1" name="votingvalue"></input>
    </div>
    <div id="bottomchoice">
        <div class="result">
            <?php echo $bottomresult; ?>
        </div>
        <div id="choicesecondleft">
            <label for="no">Nein</label>
        </div>
        <input type="radio" id="no" value="2" name="votingvalue"></input>
    </div>
</div>

CSS：

 #topchoice{
        margin-top: 40px;
        overflow:hidden;
        background-color: #000;
        opacity: 0.9;
    }

    #bottomchoice{
        margin-top: 5px;
        overflow:hidden;
        background-color: #000;
        opacity: 0.9;
    }
    #choicefirstleft{
        width:30%;
        background-color:greenyellow;
        float:left;
        z-index: 1;
    }
    #choicesecondleft{
        width:99%;
        float: left;
        background-color: red;
        z-index: 1;
    }

    #results{
         font-size: x-large;
        width: 50%;
        margin:0 auto;   
        color: white;
        overflow:hidden;
    }

    #results input{
        float:right;


        z-index: 4;
    }

http://jsfiddle.net/K3Qgf/

Answer 1

我制作了容器

position: relative;

然后

position: absolute;

单选按钮上的

（带有新类）

http://jsfiddle.net/K3Qgf/1/

当没有空间时，将单选按钮放在div上

1 个答案: