CSS Float 不 float ？

Question

我有一个片段，其中包含两个我想要并排放置的区域。但是第二部分拒绝 float 到应有的位置？

<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

为第二个 div 的样式添加一个 float 属性。它们将彼此相邻地向左漂浮。

一般 float 元素会忽略其他 block 元素，而 float 到父容器中。此外，编写内联样式也不是好的做法，请尝试将语义与样式分开。

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