CSS浮动不浮动？

我有两个片段，我想并排。但第二部分拒绝浮动应该在哪里？CSS浮动不浮动？

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

任何想法？

来源

2014-09-23 Robert Benedetto

是视（或容器）足够宽，以适应两个div？否则默认是断线...... – LcSalazar 2014-09-23 16:34:14

'但第二部分拒绝浮动'第二个区域没有'浮动'。 – 2014-09-23 16:37:06

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

来源

2014-09-23 16:38:09

你也许可以充实一点这个答案。目前它更像是一个评论。 – Moob 2014-09-23 16:43:22

Thanks @Moob，我编辑了我的答案，但是显然第一次没有工作。无论如何感谢您的建议。 – 2014-09-23 16:47:16

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>

这是你想要的吗？

来源

2014-09-23 16:34:14 Bioto

这是可怜的回答...请解释你的改变，而不是只给出代码... – LcSalazar 2014-09-23 16:35:20

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

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

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

来源

2014-09-23 16:38:00

+1对'一般浮动元素将忽略其他块元素。对于那些好奇，更多[这里解释]（http://stackoverflow.com/questions/25475822/why-does-css-float-not-change-the-width-of-the-following-div/25476238# 25476238） – 2014-09-23 16:40:05

+1添加详细解释！ – 2014-09-23 16:53:21

简单地让他们都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/

来源

2014-09-23 16:42:01 Moob

CSS浮动不浮动？

回答

相关问题