我们正在开发图片库站点，但找不到解决以下问题的方法。
图片墙包含几张图片。一些图像(n 百分比)应该突出显示并在墙上显示为双倍大小。
问题是，我不知道要填充大图片左侧的空白区域，因为它是一个新行。
任何想法。
我在这里为这个示例创建了一个 fiddle :Fiddle
<body>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size2">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
<div class="size1">
</div>
</body>
div {
background-color: #f00;
float: left;
}
.size1{
width: 100px;
height: 100px;
margin: 5px;
}
.size2{
width: 210px;
height: 210px;
margin: 5px;
}
最佳答案
更新:
以下浏览器现在原生支持 CSS 网格布局。
火狐 v52
适用于 Linux、macOS、Windows、iOS 和 Android 的 Chrome v57
Safari v10.1
iOS 浏览器 v10.3
Opera v44
这种布局要求就是CSS Grid Layout规范旨在解决。规范的介绍如下:
Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
对 CSS 网格布局 的 native 浏览器支持可能很快就会开始在主要浏览器中登陆(如 here 所示)，并且目前在某些浏览器中以标志为特色。对于不支持此 JavaScript 的浏览器 polyfill将是必要的。
例如，CSS 网格布局 语法显示在以下 CSS 中:
HTML
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box box--double">5</div>
<div class="box">7</div>
<div class="box">8</div>
...
</div>
</div>
CSS 使用网格布局模型
.wrapper {
width: 600px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(7, 100px);
grid-template-rows: 100px 100px 100px;
grid-auto-flow: row;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
margin: 5px;
}
.box--double {
background-color: red;
grid-column: 3 / span 2;
grid-row: 2 / span 2;
}
演示
这是一个fiddle它利用 CSS Grid Layout 语法(包括 polyfill)来提供一般要点。
或者，Masonry也许能够实现这一目标，但从长远来看，这将始终依赖于 JavaScript。
响应式网页设计 (RWD)
CSS Grid Layout模块包括几个功能来简化响应式设计的创建。解决评论中提出的问题的两个相关功能是:
应该使用 fr 单位，而不是将相对列宽指定为百分比。 fr 单元的主要好处是它避免了在列数通过媒体查询更改时手动重新计算百分比 - (您只需更改列数的值):
/* Avoid using percentages like this */
.wrapper {
grid-template-columns: repeat(7, 14.286%);
...
}
/* Use the 'fr' unit instead */
.wrapper {
grid-template-columns: repeat(7, 1fr);
...
}
可以分配给 grid-auto-flow 的三个值属性，即 row、column 和 dense。
.wrapper {
grid-auto-flow: dense;
...
}
在某些情况下，当使用 row 或 column 值时，它会在布局中产生不需要的孔/间隙。当指定 dense 时，算法会尝试填补这些漏洞/差距，但这有时会改变元素的顺序。此功能与 Masonry 的方式非常相似根据可用的垂直空间将元素放置在不同的位置。
RWD 演示
这是一个响应 fiddle它同时使用 fr 单位和 dense 值来避免布局中的任何间隙/孔洞。
EDIT(5):更新了支持 CSS 网格布局的浏览器列表。
EDIT(4):添加了关于 Chrome 57 实现 CSS 网格布局规范的注释。
EDIT(3):添加了关于 Firefox 52 实现 CSS 网格布局规范的注释。
EDIT(2):添加有用的 CSS 网格布局功能以实现 RWD
EDIT(1):将示例代码更改为简洁版本并更新了指向外部 fiddle 的链接
关于css - 带有双倍高亮图片的照片墙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42114205/