一个div需要不停的出现,问题是需要实现位置变化
 <div></div>

这样的一个div,默认是存在在页面左边的,之后新增这样一个div,属性完全一样的div,让它出现在右边,第三次新增这个div,让他出现在左边,第四次在右边,以此类推

补充的说,这个div默认开始只有一个,并且在左边,页面有个按钮会不停的建立这个div,但是又不想每次出现都在左边,而是一左一右那样出现

11个回答

这样?


<style>#dv{overflow:auto}#dv div{float:right;width:100px;height:100px;border:solid 1px #000;margin-right:5px}#dv div:nth-child(2n+1){float:left;margin-left:5px;margin-right:0}</style>
<div id="dv"><div></div></div>
<input type="button" onclick="addDiv()" value="add div"/>
<script>
    function addDiv(){
        var dv=document.getElementById('dv');
        dv.appendChild(document.createElement('div'))
    }
</script>

可以把div的属性设置display: inline-block; jquery. 定义个全局的变量,保证true和false交替着。
$("body").prepend("

left
");//插入在最左侧
$("body").append("
right
");//插入在最右侧
不知你明白了没有
 <input type="button" onlcick="adddiv()">
<body>
    <div>center</div>
<body>
<script>
var bool = true;
function adddiv(){
    if(bool){
        $("body").append("right");//插入在最右侧
        bool = false;
    }else{
        $("body").prepend("left");//插入在最左侧 
        bool = true;
    }
}
</script>

写完没有测试,逻辑明白了么

.right{float:right} .left{float:left}

$(".btn").click(function(){ if($("#hidIndex").val()=="right"){ $("div").append("<div class='right'></div>") } else{ $("div").append("<div class='left'></div>") } })
function addDiv(){ if($("div").length%2 ==0) // 判断当前页 div 奇偶个数 有属性可以加上属性判断 $("body")append("<div style='float:right'></div>"); //偶数靠右 else $("body")append("<div style='float:left'></div>"); //奇数靠左 }
 function addDiv(){ if($("div").length%2 ==0) // 判断当前页 div 奇偶个数 有属性可以加上属性判断
 $("body")append("<div style='float:right'></div>"); //偶数靠右 
 else $("body")append("<div style='float:left'></div>"); //奇数靠左 
 }

你试试这个

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .panel {
            width: 100px;
        }
        .s {
            height: 50px;
            /* 宽度为父元素的50%,因为你是要一左一右的添加
               所以一行可以理解为2个div,因此是50%。一行3
               个就33.33%,4个就25%,以此类推 */
            width: 50%;
            background-color: #3d93fd;
            float: left;
        }
        button {
            position: absolute;
            top: 300px;
            left:300px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <!-- 这是外部div,你可以控制它的宽度及位置 -->
    <div id="panel" class="panel">
        <!-- 这是要复制的div -->
        <div class="s"></div>
    </div>
    <button onclick="addDiv();">添加div</button>
    <script>
        //被复制div的持久化容器
        var dom = null;
        function addDiv() {
          //第一次复制时
          if (null == dom) {
            //根据class获取dom元素,返回值时数组,内容为相应class的所有dom元素,没有对应元素则返回空数组
            //这里直接取第一个元素
            var dom = document.getElementsByClassName('s')[0];
          }
          //获取外部div元素对象
          var pan = document.getElementById('panel');
          //添加元素的复制体
          pan.appendChild(dom.cloneNode(true));
        }
    </script>
</body>
</html>

在需要把生成的div外层再包一个宽度为50%的容器就可以粗暴地解决你的需求啦。
有了外面一层宽度50%的容器,那么无论用浮动或者flex甚至直接设置容器display为inline-block都是可以的。
这里使用css的:nth-child()选择器就可以很方便地区分出了哪些元素应该在左边哪些元素应该在右边。
代码里贴出的为使用浮动的;
使用flex在最外层容器.add-element-container中设置display:flex;flex-wrap: wrap;即可;
既然在生成的div外面又包了一层宽度为50%的容器那么直接设置该容器display:inline-block;是最简单粗暴的。

以下代码已在本地跑过,三种实现方式都有。默认为inline-block。具体请看注释

<!DOCTYPE html>



demo
<br> html,<br> body,<br> div,<br> p {<br> margin: 0;<br> padding: 0;<br> box-sizing: border-box;<br> }<br> .tac {<br> text-align: center;<br> }<br> .btn-container {<br> height: 40px;<br> margin-top: 20px;<br> }<br> .btn {<br> display: inline-block;<br> width: 100px;<br> line-height: 40px;<br> border: 1px solid pink;<br> border-radius: 8px;<br> cursor: pointer;<br> }<br> .add-element-container {<br> margin-top: 20px;<br> }<br> .add-element {<br> width: 50%;<br> height: 40px;<br> border: 1px solid blue;<br> }</p> <pre><code> /*only for float*/ /*.add-element:nth-child(Odd) {*/ /*float: left;*/ /*}*/ /*.add-element:nth-child(even) {*/ /*float: right;*/ /*}*/ /*.clear {*/ /*clear: both;*/ /*}*/ /*for flex*/ /*.add-element-container {*/ /*display: flex;*/ /*justify-content: space-between;*/ /*flex-wrap: wrap;*/ /*}*/ /*for inline-block*/ .add-element { display: inline-block; } &lt;/style&gt; </code></pre> <p></head></p> <p><body></p> <div class="btn-container tac"> <p class="btn tac" id="addBtn">点我新增!</p> </div> <div class="add-element-container"> <!--only for float--> <!--<div class="clear"></div>--> </div> <p></body></p> <script> let count = 0; let addBtn = document.getElementById('addBtn'); let addElementContainer = document.getElementsByClassName('add-element-container')[0]; let clear = document.getElementsByClassName('clear')[0]; addBtn.addEventListener('click', () => { handleAddElement(); }); let handleAddElement = () => { ++count; /*外层宽度为50%的容器*/ let createDiv = document.createElement('div'); createDiv.setAttribute('class', 'add-element'); /*你需要再生成你真正需要的div塞到上面那个容器中*/ let realDiv = document.createTextNode(count); createDiv.appendChild(realDiv); /*for float*/ // addElementContainer.insertBefore(createDiv, clear); /*flex or inline-block*/ addElementContainer.appendChild(createDiv); } </script> <p></html></p> <pre><code> </code></pre>

诶代码炸了,重贴一哈试试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        html,
        body,
        div,
        p {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .tac {
            text-align: center;
        }
        .btn-container {
            height: 40px;
            margin-top: 20px;
        }
        .btn {
            display: inline-block;
            width: 100px;
            line-height: 40px;
            border: 1px solid pink;
            border-radius: 8px;
            cursor: pointer;
        }
        .add-element-container {
            margin-top: 20px;
        }
        .add-element {
            width: 50%;
            height: 40px;
            border: 1px solid blue;
        }

        /*only for float*/
        /*.add-element:nth-child(Odd) {*/
            /*float: left;*/
        /*}*/
        /*.add-element:nth-child(even) {*/
            /*float: right;*/
        /*}*/
        /*.clear {*/
            /*clear: both;*/
        /*}*/

        /*for flex*/
        /*.add-element-container {*/
            /*display: flex;*/
            /*justify-content: space-between;*/
            /*flex-wrap: wrap;*/
        /*}*/

        /*for inline-block*/
        .add-element {
            display: inline-block;
        }
    </style>
</head>

<body>
<div class="btn-container tac">
    <p class="btn tac" id="addBtn">点我新增!</p>
</div>
<div class="add-element-container">
    <!--only for float-->
    <!--<div class="clear"></div>-->
</div>
</body>
<script>
    let count = 0;
    let addBtn = document.getElementById('addBtn');
    let addElementContainer = document.getElementsByClassName('add-element-container')[0];
    let clear = document.getElementsByClassName('clear')[0];
    addBtn.addEventListener('click', () => {
        handleAddElement();
    });
    let handleAddElement = () => {
        ++count;
        /*外层宽度为50%的容器*/
        let createDiv = document.createElement('div');
        createDiv.setAttribute('class', 'add-element');
        /*你需要再生成你真正需要的div塞到上面那个容器中*/
        let realDiv = document.createTextNode(count);
        createDiv.appendChild(realDiv);
        /*for float*/
        // addElementContainer.insertBefore(createDiv, clear);
        /*flex or inline-block*/
        addElementContainer.appendChild(createDiv);
    }
</script>

</html>


center


<br> var bool = true;<br> function adddiv(){<br> if(bool){<br> $(&quot;body&quot;).append(&quot;right&quot;);//插入在最右侧<br> bool = false;<br> }else{<br> $(&quot;body&quot;).prepend(&quot;left&quot;);//插入在最左侧 <br> bool = true;<br> }</p>
共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

5
java 中div被拖拽后经历某些事件能让div回到拖拽之前的位置
4
createElement("div") 创建一个div 和 直接用字符串拼接一个div一样吗?
5
图中bootstrap弹窗div的实现
9
如何在点击一个<div>时去执行一个javascript里的函数?
3
javascript编程语言怎么实现拖动div并且保存div的布局
3
javascrpt语言里怎么实现div点击以后通过文本框给它更新的功能,html的实现?
4
怎么在javascopt语言的开发中实现div双向判断对应的input?
10
用JQuery实现在div1后追加多个有内容的div2,并实现div2里面的元素的id自增
2
h5怎么实现javascrip语言判断div的高度如何实现自适应的高度?怎么用代码实现页面判断?
2
javascrpt语言怎么在html5页面上实现多个div环绕排列,内容不重叠的显示?
1
怎么利用javascapt语言实现3个div的排列的顺序的排序操作?怎么对3个div排列?
1
javascript怎么实现对多个html+div实现的css的界面先判断后显示?
1
javascript实现div从html中导入操作,从html中导入div文档怎么实现?
1
javascrpt语言怎么实现行div跨行的合并,保持div的编辑不变,实现和并,怎么做?
1
多个div浮窗的只有一个能移动的问题
4
用div+css,可以实现类似frame的效果吗?
1
html中当浏览器宽度缩小时div的换行问题
2
如何用js点击相同类名的多个div,各个div之间的操作互不影响?
1
在div外面嵌套一个div,里面的js失效了不能用了
2
jacascrpt编写代码实现移动的小球的效果,小球遇到div边框要求能反弹