CSS:为什么这两个div(或span)元素不会彼此相邻

Question

在下面的代码中,我需要div元素#ldiv并且#rdiv彼此相邻放置.

所以我使用CSS float属性.我查了一下这个答案,我想我正在关注它,但是div仍然不会彼此相邻.第二行div显示在下一行.

然后我认为这div是一个块级元素,所以我替换了divby span元素.但这也没有帮助.

JSFiddle在这里.

<div style="padding:25px; width:400px;">

    <div style="background-color:#bf5b5b;">
    <span>Yes</span>
    <span>No</span></div>

        <div id="option_one_div">
            <div id="ldiv" style="float:left; background-color:#74d4dd; width:150px;">
            <label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
            <label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
            </div>
            <div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
            <span>Label of first group of Radio Buttons radio buttons.</span>
            </div>
    </div>

</div>

Answer 1

在您的情况下,您可以display:table在#option_one_div示例中的container()和 display:table-cell子元素(#ldiv,#rdiv)中使用,如下所示:

<div style="padding:25px; width:400px;">

    <div style="background-color:#bf5b5b;">
    <span>Yes</span>
    <span>No</span></div>

        <div id="option_one_div" style="display: table;">
            <div id="ldiv" style="background-color:#74d4dd; width:150px;display:table-cell;">
            <label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
            <label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
            </div>
            <div id="rdiv" style="display:table-cell; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
            <span>Label of first group of Radio Buttons radio buttons.</span>                
            </div>
    </div>

</div>

小提琴

如你所见,你不需要floats.