javascript - 如何让较小的 div 包裹在较大的 div 中，如 css wrap-text 方法？-6ren

javascript - 如何让较小的 div 包裹在较大的 div 中，如 css wrap-text 方法？

转载作者：行者123 更新时间：2023-11-28 06:39:50

30

4

所以我从 javscript 动态创建 div，然后将它们放入一个名为“wrapper”的 div 中。但是，我的 div 都不正常。我使用的系统是这样的:

我有一张带有信息的单张卡片，我希望将其创建 5 次，然后放入另一个将这种卡片放在一起的 div 中。我这样做的次数与我的数组长度一样多。

一旦我拥有所有这些，我就会将本身包含 5 张卡片的 jobholder div 附加到包装 div 中，但一切都不成功。

我的 CSS 有什么问题？

 <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
            <meta http-equiv="refresh" content="1800">
                <link rel="stylesheet" type="text/css" href="styles/JobDiv.css">
                <script type="text/javascript" src="scripts/JobDiv.js"></script>    
                 <script type="text/javascript" src="scripts/jquery.js"></script>
        </head>
        <body>
            <div class="wrapper12">
            </div>
        </body>
    </html>

.wrapper12{
    display:inline-block;
    top:25%;
    left: 5em;
    overflow:auto;
    position:relative;
}
.boxHold{
    width: 10em;
    height: 10em;
    top : 50%;
    margin: 5em;
    background : red;
    font-size : 10px;
    text-align:center;
    position: relative;
    -moz-user-select:none;
    float:left; 
}
.boxMe{
    width: 100%;
    height:100%;
    top : 25%;
    background : red;
    font-size : 10px;
    text-align:center;
    position: absolute;
    -moz-user-select:none;
}
#boxB{
    width: 15em;
    height: 15em;
    top : 0%;
    left: 60em;
    background : blue;
    font-size : 15px;
    margin: 1em;
    text-align:center;
    position: relative;
    z-index:1;
}
.boxC{
    width: 13em;
    height: 13em;
    top : 0;
    background : yellow;
    font-size : 100%;
    margin: 1em;
    left:5em;
    text-align:center;
    position: absolute;
    -moz-user-select:none;
}

li.item{
    list-style:none;
    padding:5px;
}

ul.prolist{
    list-style-position:inside;
    text-align:center;
}



    var arr;
    var counter = 0;
    var pageBody = document.getElementsByTagName('body');
    var wrapper12 = document.getElementsByClassName('wrapper12');

    window.onload = function(){
        arr=[['638110','2015-12-13',12],['638123','2015-12-15',5],['638124','2015-12-15',2],['638125','2015-12-15',1],['638126','2015-12-15',10],['638127','2015-12-15',7],
        ['638128','2015-12-15',1],['638129','2015-12-15',10],['638130','2015-12-15',7],['638131','2015-12-15',1],['638132','2015-12-15',10],['638133','2015-12-15',7],['638134','2015-12-15',7],['638135','2015-12-15',7]];
        buildInsert();
        buildDiv();
    }
    function createCard(arr)
    {
        var ul = document.createElement('ul');
        ul.setAttribute("class","prolist");

        for(var i=0; i<=arr.length-1;i++)
        {
            var li = document.createElement('li');
            li.setAttribute("class","item")
            li.innerHTML = arr[i];
            ul.appendChild(li);
        }
        return ul;
    }
    function buildDiv(){

        for(var i = 0; i<=arr.length-1;i++){
            counter  = i*150;
            var jobholder = document.createElement('div');
            jobholder.setAttribute("class","boxHold");
            for(var j=10;j>=1;j--){

                var jobdiv = document.createElement('div');
                //var ul = createCard(arr[i]);

                var jobnum = document.createTextNode(arr[i][0] + "\n" + arr[i][1] + "\n" + arr[i][2] );
                jobdiv.setAttribute("class","boxMe");
                jobdiv.setAttribute("id",""+arr[i][0]+" "+j);
                jobdiv.setAttribute("draggable","true");
                jobdiv.setAttribute("ondragstart", "return dragStart(event)");  
                jobdiv.setAttribute("ondrop", "return dragDrop(event)");
                $(jobholder).css({left:counter});
                jobdiv.appendChild(jobnum);
                jobholder.appendChild(jobdiv);
                $(jobholder).appendTo(wrapper12);   

            }
        }
    }

最佳答案

我发现了问题，是我在 jobholder div 上设置了我的“left:counter”属性。一旦我删除它，它就起作用了。

关于javascript - 如何让较小的 div 包裹在较大的 div 中，如 css wrap-text 方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34363956/

30

4

0

文章推荐： javascript - 图像结果未显示在页面上

文章推荐：单击正文中任意位置时隐藏的 JavaScript

文章推荐： javascript - 在 ExpressJS 中将变量传递给 JavaScript

文章推荐： javascript - JS 等于字符串中的值

java - 包裹、类加载器和读取空值
我想了解如何正确地从 Parcel 中读取空值。让我们看看我的用例: public class MyModel implements Parcelable { private Long id;
java - 如何用Java读取sqlite数据库文件？ (包裹)
好吧，我知道我必须使用 JDBC 等，但我不确定如何将 jar 实现到我的代码中，我有一个基本代码来打开文件等，但我如何才能真正将 sqlite jar 与我的 java 一起合并类文件可以在任何地方
android - 包裹/序列化类加载器
我想知道是否可以打包(或序列化)ClassLoader 以通过 Message 将其发送到 Android 中的另一个进程。 ClassLoader没有实现 Parcelable/Serializab
javascript - SVG 动画不适用于静态文件夹/包裹
在上传到我的域时尝试让我的 SVG 出现在浏览器中时，我 - 类似于我拥有的其他项目包裹安装 - 创建了一个静态文件夹我会将 SVG 文件放入的位置。它现在出现在浏览器中，但是，正在播放的“绘图
jquery - 包裹 html 的一部分
我有这样的东西: 我希望以最简单的方式实现这样的事情:
javascript - 为什么我们需要用 () 包裹 IIFE
当我们使用一个独立的函数语句作为 IIFE 时，我们需要用 () 包装它以使其工作 // IFFE (function a(){ console.log('Hello') }()); // I
java - 请求被 CDATA 包裹
我正在为 WCF 开发一个 Java 客户端，并且模板运行良好。我最初使用的是 eclipse 的 Web 服务客户端项目，但后来发现 android 平台不支持所需的库。当时我打算使用 ksoap，
javascript - 包裹 html 标签以使所有标签都可点击
我希望将整行变为可点击。现在行看起来像 Group Obj
html - 希望内容以父为中心但 flex 包裹
我有以下标记(使用 Bootstrap 4): .resource{ border:1px solid red; } tes
html - 我如何防止第二个 child 包裹
#parent{ max-width:1100px; margin: auto; border: 1px solid red; padding: 40px; } #ch
javascript - 包裹 AngularStrap Popover
我正在尝试用自定义指令包裹 Angular 带的弹出框。弹出窗口应该能够使用由使用我的指令的人提供的自定义模板，并且该模板应该能够使用 Controller 的范围。对于范围部分，我发现我可以将
HTML 包裹 div 全宽
我有一个 HTML 页面，其中一个 div 包含另一个包含数据库(聊天系统)中所有用户的 div，但是 ul li 标签没有占用父 div 的整个宽度。这是预期结果的图像:http://prntscr
java - 通过 socket 包裹
我正在尝试通过套接字将包裹发送到 Android 应用程序。客户端在 libbinder(c++) 中，服务器是一个必须重建包裹的 android 应用程序。我一直在寻找解决方案有一段时间了，但我不知
html - 部署多个 html 文件的问题。包裹
当我部署一个网站(有多个入口点，许多 HTML 文件)并且主机使用构建命令时:parcel build index.html aboutme.html。部署的网站给我一个 404 错误。但是，如果我在
java - ExceptionMapper 实体似乎被 Quarkus 包裹
在 Quarkus 中，异常映射器返回的实体似乎被包装在另一个实体中。提供一个 JAX-RS 异常映射器，例如: @Provider public class WebhookExceptionMap
core-animation - CATextLayer 包裹 sizeToFit？
如果我设置 textLayer.wrapped = YES , 如何调整大小 textLayer包含包装的文本？即，我如何获得 textLayer 的新高度? 基本上，我想要类似 -[UILabel
jQuery 用 anchor 包裹 img
您好，如果类有 anchor ，我会尝试用 anchor 包裹图像。 jQuery: if ( $(".views-row:has(a)").length) { var noderef = $
node.js - 包裹 SemVer 错误
所以，我以前多次使用 Parcel，我从来没有遇到过问题。这一次它抛出了一些关于 SemVer 版本控制的愚蠢错误，我真的很想找到解决这个问题的解决方案。我开始了新项目:安装了 npm w/npm
android - 包裹 : unable to marshal value
我将 Kotlin 与 Anko 一起使用，我想向另一个 Activity 发送玩家列表。 class Player(var name: String?) { var score: Int = 0 i
Android - 包裹 : unable to marshal value
我正在尝试使用 Parcelable 通过 Activity 传递数据。这是我的代码: public class Player implements Parcelable { public stati

首页

博学

6Ren·AI

商城

javascript - 如何让较小的 div 包裹在较大的 div 中，如 css wrap-text 方法？