Question

几天前，我在同一社区的帮助下制作了一个脚本，将数组中的随机图像显示为4个div。每个图像在刷新和/或使用计时器时都会改变它工作得很好，直到我决定使用它与我一直在研究的CSS布局相关联。

HTML：

<section>
    <div id="square_1" class='box'>
    </div>

    <div id="square_2" class='box'>
    </div>

    <div id="square_3" class='box'>
    </div>

    <div id="square_4" class='box'>
    </div>
</section>

CSS：

body{
  width: 100%;
  height: 100%;
  background-color: #404040;    
}
.box{
  position: relative;
  width: 20%;   /* desired width */
  background-color: #ffb3b3;
  border: 10px solid #fff;
}
.box:before{
  content: "";
  display: block;
  padding-top: 100%;  /* initial ratio of 1:1*/
}
.box img{
    width: 100%;
}
/* Positions */
#square_1{
    position: absolute;
    margin-top: 2%;
    margin-left: 42%;
    z-index: 90;
}
#square_2{
    position: absolute;
    margin-top: 22%;
    margin-left: 2%;
    z-index: 100;
}
#square_3{
    position: absolute;
    margin-top: 48%;
    margin-left: 27%;
    z-index: 100;
}
#square_4{
    position: absolute;
    margin-top: 34%;
    margin-left: 73%;
    z-index: 100;
}

这是一个如何布局的演示： http://codepen.io/anon/pen/ZWYywx

JQuery的

/* generate the array of images you want to choose from */
var srcarray = [
  "https://s-media-cache-ak0.pinimg.com/736x/7e/1d/4a/7e1d4a1566976f139a2ba58b108e2bce.jpg",
  "http://rs832.pbsrc.com/albums/zz248/Paria53/Edited/Random.jpg~c200",
  "http://images.freeimages.com/images/premium/large-thumbs/5187/51875120-random-numbers-forming-a-sphere.jpg",
 "http://www.islandstone.com/mediafiles/product_records/56_Random_lines_thumb.jpg"
];

function randomizeImages() {
  arr = [];
  /* select unique images from the array and display them into relevant divs (any number divs allowed, should be less than available images)*/
  while(arr.length < $("section div").length){
    var randomnumber= srcarray[Math.floor(Math.random()*srcarray.length)];
    var found=false;
    for(var i=0;i<arr.length;i++){
       if(arr[i]==randomnumber){found=true;break}
    }
    if(!found)arr[arr.length]=randomnumber;
    $( "section div:nth-child("+(i+1)+")" ).html( '<img src="'+randomnumber+'">' );
  };
}

//randomize images when page is reloaded
$(function() {
 randomizeImages();
});

//randomize images every 5 seconds (change interval as you wish)
window.setInterval(function(){
  randomizeImages(); 
}, 5000);

以下是我将其与所述脚本相关联时会发生什么： http://codepen.io/anon/pen/RaNgvN

我确实尝试将<img>的top，margin和padding设置为零，但它似乎不起作用。有没有人知道是什么导致它或如何预防它？

Answer 1

尝试将.box添加到mysql --user=root --password=root --default_character_set utf8 database2 < database1.backup.sql课程。 Flexbox是解决所有css位置问题的绝佳解决方案：）

脚本更改div大小，忽略css

1 个答案: