Question

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

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

然后我认为div是块级元素，因此我将div替换为span个元素。但这也没有帮助。

<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，在子元素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

如您所见，您不需要floats。

Answer 2

在div中使用带浮点数的宽度

<div id="rdiv" style="float:right; background-color: #74d4dd; /* margin-left: 151px; */ padding-left: 20px; width: 210px;padding-right: 20px">
            <span>Label of first group of Radio Buttons radio buttons.</span>
            </div>

plz check

Answer 3

元素的总宽度（包括边距/边框）不能大于400px的周围div宽度，否则浮动元素将被放入下一行...请参阅akz的答案快速修复

Answer 4

只需删除float:right即可。它会起作用。

  <div id="rdiv" style="background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">

DEMO

Answer 5

主要问题是您没有为id="rdiv"添加宽度并使用margin-left:151px 当你使用浮动的一些元素时，你必须添加它的宽度

<div>
    <div style="float: left;width: 110px;height: 90px;margin: 5px;">a</div>
    <div style="float: left;width: 110px;height: 90px;margin: 5px;">b</div>
    <div style="float: left;width: 110px;height: 90px;margin: 5px;">c</div>
</div>

要解决问题，您可以执行以下操作之一：

1：将您的代码更改为:(注意您设置margin-left：151px;在id="rdiv"中我将其更改为更低的值）

<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:15px; padding-left: 20px; padding-right: 20px; width:50px;">

2：删除float=right中的id="rdiv"，以便id =“ldiv”可以在此元素的浮动版本中

CSS：为什么这两个div（或span）元素不会彼此相邻

5 个答案: