87,923
社区成员
发帖
与我相关
我的任务
分享js基础问题
刚学javascript，不会jq。想要实现一个功能，就是创建一个大div作为范围。再创建n个小div，每个小div横向排列，如果超出大div的范围，就另起一行接着横向排列。现在遇到的问题时，所有小div都是重叠的，请问如何让其不重叠，如何实现超出范围自动换行?
...全文
请发表友善的回复…
发表回复
北巷小哥驾到 2019-02-26
- 打赏
- 举报
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<strong>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</strong>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</html>
<script>
</script>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
margin: 5px;
}
.box{
width: 330px;
height:300px;
border: 1px solid red;
}
</style>
Hello World, 2019-02-19
- 打赏
- 举报
addClass是jQuery的写法，原生的javascript没有，appendChild不是appendChiled
不知道你的代码还有什么问题，仔细一点检查检查
不知道你的代码还有什么问题，仔细一点检查检查
Hello World, 2019-02-19
- 打赏
- 举报
动态生成：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>#</title>
<style>
.innerbox{
display:inline-block;
width:200px;
height:100px;
margin:5px;
background-color:chocolate;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script>
for (var i = 0; i < 30; i++) {
var _box = document.createElement('div');
_box.className = "innerbox";
document.getElementById('box').appendChild(_box);
}
</script>
饺子da 2019-02-19
- 打赏
- 举报
你好，感谢回复，我需求是想用js自动生成。我的做法就是 var mydiv = document.createElement("div");mydiv.addClass("abc");然后再appendChiled();都写在一个for循环里，想创建多少就创建多少。现在用您的方法还是重叠
饺子da 2019-02-19
- 打赏
- 举报
你好，感谢回复，我需求是想用js自动生成。我的做法就是 var mydiv = document.createElement("div");mydiv.addClass("abc");然后再appendChiled();都写在一个for循环里，想创建多少就创建多少。现在用您的方法还是重叠
Hello World, 2019-02-19
- 打赏
- 举报
如果内部块都一样大小直接设置display属性为inline-block就可以了
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>#</title>
<style>
.innerbox{
display:inline-block;
width:200px;
height:100px;
margin:5px;
background-color:chocolate;
}
</style>
</head>
<body>
<div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
<div class="innerbox"></div>
</div>
</body>
</html>
_Nana_ 2019-02-19
- 打赏
- 举报
这是布局相关问题，不需要js，需要css的相关知识，建议去了解下flex布局，看下flex-wrap，可以实现你说的效果。http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
