【问题标题】:CSS Float not floating?CSS浮动不浮动?
【发布时间】:2014-09-23 16:31:28
【问题描述】:

我有一个需要并排的两个区域的 sn-p。但是第二部分拒绝浮动它应该浮动的地方?

<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>                 

有什么想法吗?

【问题讨论】:

  • 视口(或容器)的宽度是否足以容纳两个 div?否则默认是换行...
  • But the second section refuses to float第二个区域还没有floated。

标签: css css-float


【解决方案1】:

为第二个 div 的样式添加一个 float 属性。它们将向左并排漂浮。

一般浮动元素会忽略其他块元素,并浮动到父容器。此外,编写内联样式也不是好习惯,请尝试将语义与样式分开。

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

【讨论】:

  • +1 表示Generally floating element will ignore other block element。有兴趣的朋友,更多explanation here
【解决方案2】:

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

【讨论】:

  • 您可以稍微充实一下这个答案。目前它更像是评论。
  • 谢谢@Moob,我编辑了我的答案来做到这一点,但显然第一次没有工作。无论如何感谢您的建议。
【解决方案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>

这是你想要的吗?

【讨论】:

  • 这回答不好...请解释您的更改,而不是只提供代码...
【解决方案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/

【讨论】: