我正在创建一个网站,通过ajax调用从db加载内容,然后通过创建元素并将其附加到父级来写入数据。
但是,我的CSS包含了::after
元素的一些样式,当我通过JavaScript追加html时没有写入,因为通过JavaScript将元素附加到html会将每个元素直接放在前一个元素的后面。当你写简单的html
相关的css:
.Review .Thumb {
display: inline-block;
margin-bottom: 5px;
width: 15%;
cursor: hand;
cursor: pointer;
zoom: 1;
*display: inline;
}
.Review .Thumbs:after {
content: "";
width: 100%;
display: inline-block;
zoom: 1;
*display: inline;
}
.Review .Thumb img {
width: 100%;
}
相关的自编html:
<div class="Thumbs">
<div class="Thumb" onClick="ViewThumb(1,1)">
<img src="images/pictures/pic2.png" id="Review_1_Picture_1" border="0" title="Voorgerecht">
</div>
<div class="Thumb" onClick="ViewThumb(1,2)">
<img src="images/pictures/pic1.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht">
</div>
<div class="Thumb" onClick="ViewThumb(1,3)">
<img src="images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert">
</div>
<div class="Thumb" onClick="ViewThumb(1,4)">
<img src="images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking">
</div>
<div class="Thumb" onClick="ViewThumb(1,5)">
<img src="images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld">
</div>
</div>
的javascript:
var thumbsDIV = document.createElement('div');
thumbsDIV.className = 'Thumbs';
for(var i=0; i < this.pictures.length; i++) {
var pictureID = this.pictures[i].pictureID;
var thumbDIV = document.createElement('div');
thumbDIV.className = 'Thumb';
thumbDIV.onclick = function(){ViewThumb(iD, pictureID);};
var thumbIMG = document.createElement('img');
thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID;
thumbIMG.src = this.pictures[i].picture;
thumbIMG.title = this.pictures[i].description;
thumbIMG.border = '0';
thumbDIV.appendChild(thumbIMG);
thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
parentDIV.appendChild(picturesDIV);
结果如下所示 自己的HTML:
的javascript:
当我通过开发人员工具编辑所有“Thumb”div在新行上时,一切正常
答案 0 :(得分:0)
您的CSS看起来格式不正确。为了使样式与多个类一起使用,您需要用逗号分隔它们
http://jsfiddle.net/bgerhards/qdrudpba/
List(Some(node)) => {
let node = *node; // this moves the value from the heap to the stack
let ListNode { val, tail } = node; // now this works as it should
List(Some(Box::new(ListNode { val: val, tail: tail.append(value) })))
}