CSS FLOAT LEFT - 서로 옆에 두 div를 얻을 수 없습니다.

Question

몇 가지 유사한 답변을 확인한 후 래퍼, 절대/상대적인 등 여러 가지 방법으로 시도했습니다. 내 사업부가 내가 원하는대로 할 수는 없다 ..!

<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이있다 (테스트 만든 솜 인라인 조정 ...) :

#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 { 
} 

내가 원하는 무엇 : :-) 여기에

상황입니다 래퍼 "slideout"은 화면의 왼쪽 부분에 배치되고 일부 jQuery 코드와 함께 슬라이드하기 때문에 절대적입니다. 그럼 나는 서로의 위에 서로의 옆에 배치 된 두 divs 싶습니다 ...

Answer 1

귀하의 slideout은 width:300px 있습니다.
clickme의 사용자 이름은 width:300px입니다.

옆에 아무 것도 놓을 수있는 공간이 없습니다.

width:300px을 clickme에서 삭제 해보세요.

Answer 2

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