如何在调整大小时对齐元素？

时间：2016-01-16 02:49:50

标签： javascript css

包装器中有position:inline-block;个元素，但绝对定位。

使用text-align:center或margin:0 auto无效。

这是一个JSFiddle：jsfiddle.net/dralyuk/r7y7qucv/1/

＆＃13;
＆＃13; 
var el = document.getElementsByClassName('el');;
function buildGallery() {
  for (var i = 0; i < el.length; i++) { 
    el[i].style.position = 'static';  
    el[i].style.top = el[i].offsetTop + 'px';
    el[i].style.left = el[i].offsetLeft + 'px';
  }
  for (var i = 0; i < el.length; i++) {
    el[i].style.position = 'absolute';
  }
}
buildGallery();
window.onresize = function() {
  buildGallery();
}
＆＃13; 
.elsWrap {
  font-size: 0;  
  position: relative;
}

.el {
  font-size: 12px;
  height: 120px;
  width: 120px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  overflow:hidden;
}

img {
  width:100%;
  height: auto;
}
＆＃13; 
<div class="elsWrap">
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>    
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您应该使用inline-block display属性。要使用position:absolute实现它，您必须知道父元素的宽度。

父元素应该text-align:center以使子元素位于中心。

试试这个：

var el = document.getElementsByClassName('el');;

function buildGallery() {
  for (var i = 0; i < el.length; i++) {
    el[i].style.display = 'inline-block';
  }
}
buildGallery();
window.onresize = function() {
  buildGallery();
}
.elsWrap {
  font-size: 0;
  position: relative;
  text-align: center;
}
.el {
  font-size: 12px;
  height: 120px;
  width: 120px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto;
}
<div class="elsWrap">
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>
</div>

Fiddle here

答案 1 :(得分：0)

据我了解，您希望将图像置于elWrap容器中。

这是你应该做的：

.elsWrap {
  font-size: 0;  
  position: relative;
  text-align: center;
}

它将使该选择器中的所有内容居中。

答案 2 :(得分：0)

为了使包装器div居中，它必须设置一些宽度和高度，而浏览器不知道如何定位包装器元素：

var images = document.getElementsByTagName('img');
var wrapper = document.getElementsByClassName('wrapper')[0];

function buildGallery() {
  for (var i = 0; i < images.length; i++) { 
    images[i].style.position = 'static';  
    images[i].style.top = images[i].offsetTop + 'px';
    images[i].style.left = images[i].offsetLeft + 'px';
  }
  for (var i = 0; i < images.length; i++) {
    images[i].style.position = 'absolute';
  }
  wrapper.style.width = '300px';
  wrapper.style.height = '400px';
}

这是一个小提琴：http://jsfiddle.net/r7y7qucv/9/只是对包装器的尺寸进行数学计算。

PS无需使用div包装器。

答案 3 :(得分：0)

您需要计算包装器的宽度并设置其marginLeft。

这意味着this：

＆＃13;
＆＃13; 
var el = document.getElementsByClassName('el');;
function buildGallery() {
var elsWrap = document.getElementsByClassName('elsWrap')[0];
	var maxLeft = 0;
  for (var i = 0; i < el.length; i++) { 
    el[i].style.position = 'static';  
    el[i].style.top = el[i].offsetTop + 'px';
    el[i].style.left = el[i].offsetLeft + 'px';
    if(maxLeft < el[i].offsetLeft)
    	maxLeft = el[i].offsetLeft;
  }
  var width = maxLeft + 125;
  var windowWidth = window.innerWidth;
  elsWrap.style.marginLeft = ((windowWidth - width) / 2) + "px";
  for (var i = 0; i < el.length; i++) {
    el[i].style.position = 'absolute';
  }
}
buildGallery();
window.onresize = function() {
  buildGallery();
}
＆＃13; 
.elsWrap {
  font-size: 0;  
  position: relative;
}

.el {
  font-size: 12px;
  height: 120px;
  width: 120px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  overflow:hidden;
}

img {
  width:100%;
  height: auto;
}
＆＃13; 
<div class="elsWrap">
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
  </div>
  <div class="el">
    <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
  </div>
  <div class="el">
    <img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://www.thepheasantinn.co.uk/assets/images/outabout/discover-nature.jpg" alt="">
  </div>
  <div class="el">
    <img src="https://cdn.tutsplus.com/vector/uploads/legacy/articles/2011/news-premium-216-hanami/preview.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://psd.fanextra.com/wp-content/uploads/2014/03/fantasy-nature-matte-thumb.jpg" alt="">
  </div>
  <div class="el">
    <img src="http://rs144.pbsrc.com/albums/r187/dstorms/Nature/Nature08.gif~c200" alt="">
  </div>  
  <div class="el">
    <img src="http://i0006.photobucket.com/albums/0006/pb_homepage/200x200/Lightning.jpg" alt="">
  </div>  
  <div class="el">
    <img src="http://rs585.pbsrc.com/albums/ss293/drake_stacy/nature/beautiful-nature-la.jpg~c200" alt="">
  </div>    
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题