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

将float属性添加到第二个div的样式中。它们将向左浮动。

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

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

Answer 2

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>

这就是你想要的吗？

Answer 3

尝试将display: inline-block添加到第二个div，它对我有用。显示div的默认值是＆＃34; block＆＃34;使它们以新的形式显示;通过将其设置为＆＃34; inline-block＆＃34;您将强制它作为内联元素工作（span元素是内联的，并且它们与容器元素在同一行中呈现）。

Answer 4

只需将它们都inline-block。添加一个类（或内联css）以使这些元素并排显示，而不需要浮动和clearfixes：

.inlineblock {display:inline-block; vertical-align:top;}

EG：

<div>

<div style="width:320px; height:240px;" class="inlineblock">
    <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 now sits on the right side of the upper content (space permitting) -->
<div style="width:320px; height:240px; border:1px dotted #000;" class="inlineblock">
<img id="visitorImage" style="width:320px;height:240px;" alt=""/>
<asp:HiddenField ID="hdnVisitorImage" runat="server" />
</div>

</div>

http://jsfiddle.net/pbb6d9ww/

CSS浮动不浮动？

4 个答案: