html - CSS:为什么这两个 div(或 span)元素不相邻 float

Question

在下面的代码中，我需要将 div 元素 #ldiv 和 #rdiv 放在一起。

所以我正在使用 CSS float 属性。我 looked up this answer ，我想我正在关注它，但 div 仍然不会彼此相邻。第二个 div 显示在下一行中。

然后我认为div是一个 block 级元素，所以我用span元素替换了div。但这也无济于事。

JSFiddle here.

<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

在您的情况下，您可以在您的示例中使用容器 (#option_one_div) 中的 display:table 和子项中的 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>

fiddle

如您所见，您不需要 float 。