jquery 将元素附加到其 div 元素之外答案

【问题标题】：jquery appends elements outside its div-elementjquery 将元素附加到其 div 元素之外
【发布时间】：2014-02-14 18:41:28
【问题描述】：

我编写了这段代码，它将电影海报附加到带有 ID 的选定 div。 无论出于何种原因，附加元素最终都位于 div 之外（下方）。 当我在调试器中检查 HTML 时，这些元素显然位于相关 div 内部。

我不知道这里发生了什么，也无法通过搜索找到答案。帮助将不胜感激！

这是完整的代码。使用的 DIV 是 CSS 中的 div.movieListBox_trans。所有这一切的重点是将海报的网格区域边缘到中心。但是，由于元素在外部结束，因此 margin-center 属性不适用。

            <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>

【问题讨论】：

你能发一个小提琴吗？我怀疑这可能是添加溢出样式的问题，可能将容器设置为溢出：自动；但没有看到它的实际效果我不确定。当浮动元素而不使用 clear:both; 清除浮动时，这种情况经常发生；
jsbin.com/OSUkupO/1/edit

标签： javascript jquery html css append

【解决方案1】：

添加此样式以解决问题

div.movieListBox_trans {
    overflow: hidden;
}

固定版本http://jsbin.com/OSUkupO/2/edit

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

【讨论】：

谢谢伙计！这解决了它。