我试图用小照片覆盖整个页面,但我发现我不能让他们在页面中留下一些左右边距。
我没有使用 js 来做到这一点,只是使用 CSS 和 HTML:
<div class="container-fluid" id="wrapper">
<div id="home-decore">
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
etc ..
</div>
</div>
#wrapper{
background:red;
padding-top:5%;
min-height: 88%;
height: auto !important;
height: 88%;
}
#home-decore{
margin:0;
padding-top:60px;
left:0;
top:0;
position:realtive;
min-height: 100%;
height: auto !important;
height: 100%;
background:#000;
}
#home-decore img{
border-radius:2px;
border:0.3% solid white;
opacity:0.6;
width: 3.3333%;
overflow: hidden;
}
#home-decore img:hover{
opacity:1;
}
我想要的是适合所有页面 右:0;顶部
图像的数量,然后将每个图像的宽度指定为 (100/numHorizontalImages)%,然后对高度执行相同的操作。如果您水平有 10 张图像,垂直有 5 张图像,它看起来像这样:
img { width: 10%; height: 20%;}
您可以在不使用 Bootstrap css 的情况下实现这一点
here's the Css code for it
<ul>
<li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
<img/>
<li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
<img/>
</li>
</li>
...........
</ul>
对于引导程序提供的图像边框,请参阅以下链接
http://css-tricks.com/using-css-for-image-borders/
的是一个CSS重置:
http://www.cssreset.com/
您也可以尝试添加这样的东西作为对 CSS 中 body 元素的快速修复:
body{
padding:0;
margin:0;
}
发生的情况是浏览器为填充和边距定义了一些默认值,我认为这就是您当前遇到的问题。
(还注意到"#home-decore"中有一个错别字,"realtive"应该是"相对的",这可能会提供意想不到的结果)