CSS浮动不浮动？

Question

我有一个片段，有两个区域，我想并排。但是第二部分拒绝浮到它应该去的地方？

<div>
    <div style="width:320px; height: 240px; float:left;">
        <div id="webcam" style="border: 1px dotted #000;"></div>
        <div style="margin:5px;">
            <img src="/img/webcamlogo.png" style="vertical-align:text-top"/>
            <select id="cameraNames" size="1" onchange="changeCamera()" style="width:245px font-size:10px;height:25px;"></select>
        </div>
    </div>

    <!-- This part refuses to float to the right side of the upper content? -->
    <div style="width:320px;height:240px; border: 1px dotted #000;">
        <img id="visitorImage" style="width:320px;height:240px;" alt=""/>
        <asp:HiddenField ID="hdnVisitorImage" runat="server" />
    </div>
</div>                 

有什么想法吗？

Answer 1

尝试将display: inline-block添加到第二个div中，它对我有效。divs的默认值为“块”，使其在新行中显示；通过将其设置为“内联块”，您将强制它作为内联元素工作(span元素是内联元素，它们与容器元素在同一行中呈现)。

Answer 2

向第二个div的样式添加一个float属性。它们将彼此向左漂浮在一起。

通常，浮动元素将忽略其他块元素，并浮动到父容器。此外，编写内联样式也不是很好的做法，尝试将您的语义与样式分开。

    <div style="width:320px;height:240px;display:block; border: 1px dotted #000; float:left;">

Answer 3

http://jsfiddle.net/o95hzjaf/

<div>
        <div style="width:320px; height: 240px; float:left;">
            <div id="webcam" style="border: 1px dotted #000;"></div>

            <div style="margin:5px;">
                <img src="/img/webcamlogo.png" style="vertical-align:text-top">
                <select id="cameraNames" onchange="changeCamera()" size="1"
                style="width:245px font-size:10px;height:25px;">
                    </select>
            </div>
        </div>
        <!-- This part refuses to float to the right side of the upper content? -->

        <div style="width:320px;height:240px; border: 1px dotted #000;float:left">
            <img alt="" id="visitorImage" style="width:320px;height:240px;"> 
        </div>
    </div>

这就是你想要的吗？