0
我編寫了這個代碼，它將電影海報添加到具有ID的選定div。 無論出於何種原因，附加元素都會在div的外部（下方）結束。當我在調試器中檢查HTML時，元素顯然在問題的div內。jquery在div元素外添加元素
我不知道這裏發生了什麼，並且無法通過搜索找到答案。幫助將不勝感激！
以下是整個代碼。使用的DIV是CSS中的div.movieListBox_trans。所有這一切都是爲了讓海報到達中心的網格區域。但是，由於元素在外面結束，因此邊際中心屬性不適用。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(dis) {
$("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();
for(var i=0; i<7; i++){
$("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
}
});
</script>
<style type="text/css">
div.movieListBox_trans{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background: yellow;
opacity: 0,5;
}
div.filmdiv{
float: left;
width: 350px;
height: 180px;
margin: 15px;
}
div.metadiv{
float: right;
background: #DCDCDC;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
width: 200px;
height: 180px;
border-style:solid;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.poster{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 1px;
border-color: #D3D3D3;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.posterClickableNoMargin{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 3px;
border-color: black;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="displayBoxFind" class="movieListBox_trans"></div>
</body>
你可以發佈一個這樣的小提琴嗎？我懷疑這可能是一個添加溢出風格的問題，可能將容器設置爲溢出：auto;但是沒有看到它的行動我不知道。當浮動元素和清除浮動元素時都會發生這種情況： –
http://jsbin.com/OSUkupO/1/edit –