<div></div>
这样的一个div，默认是存在在页面左边的，之后新增这样一个div，属性完全一样的div，让它出现在右边，第三次新增这个div，让他出现在左边，第四次在右边，以此类推
补充的说，这个div默认开始只有一个，并且在左边，页面有个按钮会不停的建立这个div，但是又不想每次出现都在左边，而是一左一右那样出现
这样？
<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("
<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>
诶代码炸了，重贴一哈试试
<!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>
相对定位需要定位的元素relative，
div，absolute不就行了