Question

我在一个项目thelifeofthings.ca工作，但仍未完成。代码太长，无法发布。我想要实现的是在任何桌面屏幕上都有10列和5行，无论其分辨率如何。

所有图像CSS都像`

 #image {
float:left;
width: 142px;
height: 162px;
background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');
background-size: 100% 100%;
transition-property: background-image;
transition-delay: 2s;
transition-duration: 0.1s;

}`

，html就是

<a href="#" class="lightbox_trigger"><div id="image2"></div></a>

所以我按照浏览器的大小创建它，但在其他笔记本电脑中它显示不同数量的列和行

Answer 1

我检查了网站;快速解决此问题（相对于您的架构）是

a > div {
    width: 9.8vw !important;
}

基本上，您可以使用视口宽度单位（vw）指定相对于视口的单位数量。 100vw应该等于整个视口宽度，因此每个元素的10vw应该是您正在寻找的。

但是，使用Windows时滚动条存在问题，因此我使用9.8vw代替10vw（上图）。

有关视口单元的更多信息以及滚动条的问题，请参阅此链接： https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

我想保存图像＆＃39;订单和职位

1 个答案: