0
イメージをdivタグに追加していますが、追加されたイメージは互いに上書きされています。各other..Iページが石工のレイアウトを持つようにしたいと私はJavaScriptで追加しています追加イメージが上書きされる
HTML
var array = [{
imageURL: "http://placehold.it/1920x1920",
image_Title: "The Cycle",
image_Description: "What makes the desert beautiful is that somewhere it hides a well.",
importance: 3
},
{
imageURL: "http://placehold.it/1920x1920",
image_Title: "The Cycle",
image_Description: "And, when you want something, all the universe conspires in helping you to achieve it",
importance: 1
}, {
imageURL: "http://placehold.it/1920x1920",
image_Title: "The leaf",
image_Description: "All we are lost stars, trying to light up the dark",
importance: 1
}
]
for (var i = 0; i < array.length; i++) {
str1 = ' <div class="grid-item" style="font-family: serif;height:33.3%;width:33.3%;"> <img src="' + array[i].imageURL + '">' + array[i].image_Description + ' </div>';
if (array[i].importance == 1)
str1 = ' <div class="grid-item" style="font-family: serif;height:66.6%;width:66.6%;"> <img src="' + array[i].imageURL + '">' + array[i].image_Description + ' </div>';
$("#grid").append(str1);
}.grid {
background: white;
}
/* clear fix */
. grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
border: solid 15px white;
position: relative;
background-color: white;
font-size: x-large;
float: left;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}<script src="js/masonry-docs.min.js"></script>
<div style="margin-left: 7%; margin-right: 7%">
<div class="grid"></div>イメージがオーバーラップしています。