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浮動不浮動？

回答

相關問題