CSS：为什么这两个div（或span）元素不会相互浮动

问题描述

在下面的代码中，我需要div元素 #ldiv 和 #rdiv 放在每个元素旁边其他。

所以我使用CSS float 属性。我，我想我正在关注它，但这个div的位置不会彼此相邻。第二行 div 显示在下一行。

然后我认为 div 是块级元素，所以我将 div 由 span 元素。但这也没有帮助。

 < div style =padding：25px; width：400px;> 
 
< div style =background-color：＃bf5b5b;> 
< span>是< / span> 
< span>无< / span>< / div> 
 
< div id =option_one_div> 
< div id =ldivstyle =float：left; background-color：＃74d4dd; width：150px;> 
< label for =rbutton_radio_1_0style =margin-left：30px; margin-right：30px;> 
< input for =rbutton_radio_1_0type =radioname =radiovalue =0/>< / label> 
< label for =rbutton_radio_1_1style =margin-left：30px; margin-right：30px;> 
< input for =rbutton_radio_1_1type =radioname =radiovalue =1/>< / label> 
< / div> 
< div id =rdivstyle =float：right; background-color：＃74d4dd; margin-left：151px; padding-left：20px; padding-right：20px> 
< span>第一组单选按钮单选按钮的标签。< / span> 
< / div> 
< / div> 
 
< / div> 
  

解决方案

在您的情况下，您可以使用 display：table 在你的例子中的容器（ #option_one_div ）和 display：table-cell 在子元素（ #ldiv ， #rdiv ）中是这样的：

 < div style =padding：25px; width：400px;> 
 
< div style =background-color：＃bf5b5b;> 
< span>是< / span> 
< span>无< / span>< / div> 
 
< div id =option_one_divstyle =display：table;> 
< div id =ldivstyle =background-color：＃74d4dd; width：150px; display：table-cell;> 
< label for =rbutton_radio_1_0style =margin-left：30px; margin-right：30px;> 
< input for =rbutton_radio_1_0type =radioname =radiovalue =0/>< / label> 
< label for =rbutton_radio_1_1style =margin-left：30px; margin-right：30px;> 
< input for =rbutton_radio_1_1type =radioname =radiovalue =1/>< / label> 
< / div> 
< div id =rdivstyle =display：table-cell; background-color：＃74d4dd; margin-left：151px; padding-left：20px; padding-right：20px> 
< span>第一组单选按钮单选按钮的标签。< / span> 
< / div> 
< / div> 
 
< / div> 
  

正如你所看到的，你不需要 floats 。

In the following code, I need the div elements #ldiv and #rdiv to be placed next to each other.

So I am using the CSS float property. I looked up this answer, and I think I am following it, but still the div's won't position next to each other. The second div displays in the next line.

Then I thought that div is a block level element, so I replaced the div by span elements. But that did not help either.

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>

解决方案

In your situation you can use display:table in container(#option_one_div) in your example and display:table-cell in children elements(#ldiv, #rdiv) like this:

<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

As you can see you don't need floats.

这篇关于CSS：为什么这两个div（或span）元素不会相互浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！