极客观点
项目管理
HarmonyOS
如图，我想实现的效果是将那些便签的位置设置在设置在中央，装填在类似上面红色背景的content样式的容器内，但是不知如何修改
以上是主要js代码，用for循环把每个便签的内容取出来呈现
以下是完整代码，请赐教，不胜感激。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>祝福墙</title>
</head>
<style>
* {
padding: 0;
margin:0;
}
body {
background-repeat: no-repeat;
/* background-size: 100% 100%; */
background:url("./墙.jpg");
}
div.content {
/* 凝胶布局 */
width: 800px;
margin:0 auto;
background-color: red;
}
.wishingWall {
position: absolute;
/* padding: 100vw; */
background: url("./纸1.jpeg") no-repeat;
background-size:100% 100%;
width: 200px;
height:220px;
}
.tip2 {
}
span {
display: block;
}
.tip1 {
position: relative;
height: 25px;
padding-top: 43px;
/*background: url("./纸2.jpeg");*/
}
.tip1 span {
padding-left: 10px;
}
.tip1 s {
text-decoration: none;
position: absolute;
top: 45px;
right: 10px;
/*width: 15px;*/
/*height: 15px;*/
text-align: center;
font: 600 12px/15px "simsun";
cursor: pointer;
}
.tip2 {
/*background: url("./纸2.jpeg") no-repeat;*/
/*max-height: 100px;*/
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
line-height: 20px;
}
.tip3 {
/*height: 53px;*/
padding-top: 20px;
/*background: url("./纸2.jpeg") no-repeat;*/
}
.tip3 .icon {
padding-left: 10px;
}
.tip3 span {
display: inline-block;
float: right;
font-size: 14px;
margin-top: 5px;
margin-right: 16px;
color: #C0F;
}
</style>
<body>
<div class="content">
content
</div>
<!-- <div class="11">
fwadqwdqwdwqdqwdqwdqwdqwdqwdqwdq
</div> -->
<script>
//模拟数据库，获取信息
var messages = [
{"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
{"id": 2, "name": "haha", "content": "今天天气不错，风和日丽的", "time": "2016-02-18 12:40:00"},
{"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
{"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
{"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
{"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。", "time": "2016-02-22 01:30:00"},
// {
// "id": 7,
// "name": "没猴哥，不春晚",
// "content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……",
// "time": "2016-02-22 01:30:00"
// },
// {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，", "time": "2016-02-22 01:30:00"},
// {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看！！？答：朋友圈。。。", "time": "2016-02-22 02:30:00"}
];
var content = document.getElementsByClassName("content")[0];
for (var i = 0; i < messages.length; i++) {
content.innerHTML+=
'<div class="wishingWall">'
+
'<div class="tip1">' +
'<span>' + messages[i].time + '</span>' +
'<s><img src="关闭32.svg" alt="关闭" width="24vw" height="24vw"></s>' +
'</div>' +
'<span class="tip2">' + messages[i].content + '</span>' +
'<span class="tip3">' +
'<span>' + messages[i].name + '</span>' +
'</span>' +
'</div>';
}
var divEles = content.children;
var zIndexValue = 0;
for (var i = 0; i < divEles.length; i++) {
divEles[i].style.top = randomTop() + "px";
divEles[i].style.left = randomLeft() + "px";
divEles[i].onclick = function () {
zIndexValue++;
this.style.zIndex = zIndexValue;
}
var closeEle = divEles[i].getElementsByTagName("s")[0];
closeEle.onclick = function () {
content.removeChild(this.parentNode.parentNode);
}
}
function randomTop() {
return parseInt(Math.random() * (627 - 257));
}
function randomLeft() {
return parseInt(Math.random() * (960 - 231));
}
</script>
</body>
</html>
html5
子元素都是绝对定位的，撑不起来父元素
可以给父元素一个固定高度来实现