Question

我写了这段代码，将电影海报附加到带有ID的选定div。 无论出于何种原因，附加元素最终都在div之外（下方）。当我在调试器中检查HTML时，元素显然位于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>

Answer 1

添加此样式以解决问题

div.movieListBox_trans {
    overflow: hidden;
}

修正版http://jsbin.com/OSUkupO/2/edit

基本上你遇到了float:left和上下文的问题。阅读本文How does the CSS Block Formatting Context work?

jquery在div元素之外追加元素

1 个答案: