div로 플로트로 묶기

Question

4 개의 div가 있습니다. 왼쪽으로 띄우고 싶은 비디오 플레이어 (jquery로로드 됨), 오른쪽에 떠있는 도움말/팁 텍스트가 포함 된 div가 있습니다. 이 2 개는 맨 위에 줄 지어 있어야합니다. 비디오 플레이어 아래에 div 안에있는 테이블이 있습니다.

누군가가 테이블에서 버튼을 클릭하면 동영상 플레이어와 표 사이에 왼쪽에 div가 새로 추가되어야합니다.

<div id="player-ipad"></div> 
<div id="help-tips-ipad"> 
<p><img src="images/help-35-30.png" style="padding:8px;" align="left"/><h2 style="color:black;">Help Resources</h2><hr> 
<p>Read our <a href="http://www.mysite.com/support/articles/quickstart-page">Quickstart Guide</a></p> 
<p>Visit our <a href="http://www.mysite.com/support">Support Forum</a> and ask a question</p> 
</p> 
<p><img src="images/quicktip-35-30.png" style="padding:8px;" align="left"/><h2 style="color:black;">Tips</h2><hr> 
<ul> 
<li>Help tips here.</li> 
<li>More tips.</li> 
</ul> 
</p> 
</div> 

<div id="quote"><p></p></div> 

<div id="prettytablediv-ipad"> 
<p> 
<table id="webcam-table" class="pretty"> 
<thead> 
    <tr> 
     <th>Camera Name</th> 
    </tr> 
</thead> 
<tbody> 
<?php 

for($i=0;$i<$num_rows;$i++) 
{ 

?> 
<tr> 
<td> 
    <input type="submit" class="play" data-type="<?php echo $result_cameras[$i]["camera_type"]; ?>" data-hash="<?php echo $result_cameras[$i]["camera_hash"]; ?>" value="<?php echo $result_cameras[$i]["camera_name"]; ?>"> 
</td> 
</tr> 

<?php 
} 
?> 
</tbody> 
</table> 
</p> 
</div> 

내가 가진 CSS는 다음과 같습니다 :

$(document).on("click", ".play", function() { 
    $('#quote p').html("INFO").css({'border': '1px solid', 'margin': '10px 0px', 'padding': '15px 10px 15px 50px', 'background-repeat': 'no-repeat', 'background-position': '10px center', 'color': '#00529B', 'background-color': '#BDE5F8', 'width': '320px','display': 'block','clear': 'left'}); 
}); 

사람이 나를 도와 :

#prettytablediv-ipad { 
    width: 550px; 
    float: left; 
} 
#help-tips-ipad { 
    width: 320px; 
    float: right; 
} 
#player-ipad { 
    width:320px; 
    height:240px; 
    background-image:url(../../images/videoPlaceHolder01.JPG); 
    float: left; 
    margin: 0 0 15px; 
} 

장소로 제공되는 네 번째 사업부는 누군가가 버튼을 클릭 할 때 여기 내 코드입니다 이전 버전에서는 여기에 fiddle이 표시되어 완벽하게 작동합니다. 하지만 코드에 모든 변경을가했는데 왜 내가 바이올린처럼 작동하지 않을지 알 수 없습니다.

내 검색 결과는 왼쪽 대신 도움말/도움말 텍스트 바로 아래에 표가 표시됩니다. 그것 옆에 싸여있는 것 같습니다. 게다가 누군가가 버튼을 클릭하면 정보 메시지가 테이블 위 (오른쪽이지만 둘 다 왼쪽으로 정렬되어야 함)됩니다.

테이블 (#prettytablediv-ipad)이 도움말/팁 옆에 왼쪽으로 떠 있기 때문에 clear:left을 사용하면이 문제를 해결할 수 있지만 여전히 운이 없다는 것을 나타냅니다.

Answer 1

당신은

<div> 
    <p></p> 
</div> 

모든 것이 DIV 번호 도움말 - 팁 - 아이 패드 내 코드가 괜찮다고이 오타라고 생각

#help-tips-ipad { 
width: 320px; 
float: right; 
]