CSS FLOAT LEFT - 無法在海誓山盟之前獲得兩個div

已經檢查了幾個類似的答案，並嘗試了與包裝，絕對/相對等等不同的東西。似乎無法讓我的div做我想要的東西..！ :-)CSS FLOAT LEFT - 無法在海誓山盟之前獲得兩個div

這裏的情況：

<div id="slideout"> 
     <div id="slidecontent" style="margin:20px;float:left;"> 
      TEXT 
     </div> 
     <div id="clickme" style="width:300px;float:left;background: #FFF;" align="right"> 
      <img src="img/xxx.png" style="padding:2px;" width="16" height="15"> 
     </div> 
    </div>

的不是內聯CSS是這（測試由SOM直列調整...）：

#slideout { 
    z-index: 200; 
    background: #000; 
    position: absolute; 
    width: 300px; 
    height: 60%; 
    top: 20%; 
    left:-280px; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: alpha(opacity=75); 
    opacity:0.75; 
} 

#clickme { 
    z-index: 200; 
    height: 20px; 
    width: 20px; 
    background: #000; 
} 

#slidecontent { 
}

我想要什麼：包裝「滑出」是絕對的，因爲它被放置在屏幕的左邊部分並用一些jQuery代碼滑出。然後，我希望將兩個div放在彼此旁邊而不是彼此之間...

來源

2014-02-13 Brian Langhoff

真的不明白，你想做什麼？ '＃clickme'元素應該是可見的而'＃slidecontent'不是。當用戶懸停'＃slideout'時，'＃slideout'應該滑動並且出現'＃slidecontent'？ –

您的slideout已有width:300px。
您的clickme有width:300px。

沒有剩餘空間放置它旁邊的任何東西！

嘗試從clickme刪除width:300px。

來源

2014-02-13 10:11:00

將div的寬度均等地設置爲父div。即150 + 150左右

<div id="slideout"> 
     <div id="slidecontent" style="margin:20px;float:left;width:150px;"> 
      TEXT 
     </div> 
     <div id="clickme" style="width:150px;float:left;background: #FFF;" align="right"> 
      <img src="img/xxx.png" style="padding:2px;" width="16" height="15"> 
     </div> 
    </div>

來源

2014-02-13 10:19:54 Amb

你應該解釋*你改變了什麼，以及*爲什麼*。 –

檢查編輯... – Amb

CSS FLOAT LEFT - 無法在海誓山盟之前獲得兩個div

回答

相關問題