私は 4 つの div を持っています。1 つは左にフロートさせたいもの、ビデオ プレーヤー (jquery でロード)、もう 1 つは右にフロートするヘルプ/ヒント テキストを含むものです。この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は次のとおりです。
#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;
}
誰かがボタンをクリックすると配置される 4 番目の 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'});
});
誰かが以前にこれを手伝ってくれました。これは完全に機能することを示すフィドルです。しかし、私は自分のコードにすべての変更を加えましたが、なぜそれをフィドルのように機能させることができないのかわかりません。
私の結果では、左側ではなく、ヘルプ/ヒント テキストのすぐ下に表が表示されます。横に巻かれているようです。さらに、誰かがボタンをクリックすると、情報メッセージがテーブルの上に表示されます (これは正しいですが、どちらも左に配置する必要があります)。
表 ( #prettytablediv-ipad) がヘルプ/ヒントの横に浮いているため、clear:leftこれを使用すると修正されることになりますが、それでもうまくいきません。