jquery - div 环绕 float

Question

我有 4 个 div，一个我想向左浮动，视频播放器(加载了 jquery)，另一个包含一些将向右浮动的帮助/提示文本。这两个应该排在顶部。在视频播放器下方将是一个 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是:

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

当有人点击按钮时出现的第四个 div:

$(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'});
});

之前有人帮助过我，这是一个 fiddle显示它完美无缺。但是我已经对我的代码进行了所有更改，但不明白为什么我不能让它像 fiddle 一样工作。

我的结果显示表格位于帮助/提示文本的正下方，而不是左侧。它似乎被包裹在它旁边。另外，现在当有人点击一个按钮时，信息消息会显示在表格上方(这是正确的，但它们都应该左对齐)。

因为表格 (#prettytablediv-ipad) 在帮助/提示旁边向左浮动，所以使用 clear:left 会解决这个问题，但仍然没有运气。

Answer 1

你有很多未关闭的标签

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

一切都用 div #help-tips-ipad 包裹

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