带有双倍高光图片的Photowall [英] Photowall with double sized highlight pictures
问题描述
我们正在一个图片网站上，找不到以下问题的解决方案.
图片墙包含多个图像.某些图像(n％)应突出显示并在墙上显示为两倍大小.
问题是，我不知道要填充大图片的空白，因为它换了一行.
任何想法.
我在这里为此示例创建了一个小提琴:小提琴
< body>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size2">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div>< div class ="size1">& nbsp;</div></body>div {背景颜色:#f00;向左飘浮;}.size1 {宽度:100px；高度:100px；边距:5px;}.size2 {宽度:210像素；高度:210像素；边距:5px;} 更新:
以下浏览器现在原生支持CSS网格布局.
-
Firefox v52
-
适用于Linux，macOS，Windows，iOS和Android的Chrome v57
-
Safari v10.1
-
iOS Safari v10.3
-
Opera v44
CSS网格布局规范旨在解决.规范的介绍为:
Grid Layout是CSS的新布局模型，具有控制框及其内容的大小和位置的强大功能.与灵活框布局不同，后者是面向单轴的网格布局针对二维布局进行了优化:二维布局需要在两个方向上都对齐内容.
CSS网格布局的本机浏览器支持可能很快就会在主要浏览器中着陆(如此处)，目前在某些标记的后面.对于不支持的浏览器，此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 {宽度:600像素；显示:网格；grid-gap:10px;grid-template-columns:repeat(7，100px);grid-template-rows:100px 100px 100px;grid-auto-flow:行；}.盒子 {背景颜色:#444；颜色:#fff;内边距:20px;字体大小:150％；边距:5px;}.box--double {背景颜色:红色；网格列:3/跨度2;网格行:2/跨度2;} 演示
这是一个小提琴，它使用了 CSS网格布局语法(包括polyfill)以提供一般要点.
或者，砌体可以实现此目标，但是从长远来看，这将始终取决于JavaScript
响应式网页设计(RWD)
CSS网格布局模块包含一些功能，可简化创建过程快速响应设计.解决评论中提出的问题的两个相关功能是:
1 灵活的长度
应使用 fr 单位，而不是将相对列宽指定为百分比. fr 单元的主要好处是，当通过媒体查询更改列数时，它无需手动重新计算百分比-(您只需更改仅列数的值):
/*避免使用这样的百分比*/.wrapper {grid-template-columns:重复(7，14.286％);...}/*使用'fr'单位*/.wrapper {grid-template-columns:repeat(7，1fr);...} 2 的三个值grid-auto-flow 属性，即 row ， column 和 dense .
<代码> .wrapper {网格自动流:密集；...} 在某些情况下，使用 row 或 column 值时，可能会在布局中产生不必要的孔/间隙.当指定 dense 时，算法会尝试填补这些漏洞/空白，但是有时这可能会更改项目的顺序.此功能与砌体根据可用的垂直空间将项目放置在不同位置的方式非常相似.>
RWD演示版
这是一个响应式小提琴，它同时使用 fr 单元和 dense 值，以避免布局中出现任何间隙/空洞.
编辑(5):更新了支持CSS网格布局的浏览器列表.
编辑(4):添加了有关Chrome 57实现CSS网格布局规范的说明.
编辑(3):添加了有关Firefox 52实现CSS网格布局规范的说明.
编辑(2):添加有用的CSS网格布局功能以实现RWD
编辑(1):将示例代码更改为简洁版本，并更新了到外部小提琴的链接
We are working on a picture gallery site and can't find a solution for following problem.
The picture wall contains several images. Some image (n Percent) should by highlighted and get displayed double sized on the wall.
The issue is, that I have no idea to fill the empty space left of the large picture, because its a new line.
Any ideas.
I created a fiddle for this sample here: 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;
}
Update:
The following browsers now natively support CSS Grid Layout.
Firefox v52
Chrome v57 for Linux, macOS, Windows, iOS, and Android
Safari v10.1
iOS Safari v10.3
Opera v44
This kind of layout requirement is what the CSS Grid Layout spec aims to address. The introduction to the spec reads:
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.
Native browser support for CSS Grid Layout is likely to start landing in major browsers soon (as shown here) and is currently featured behind a flag in some. For non-supporting browsers this JavaScript polyfill will be necessary.
As an example, CSS Grid Layout syntax is shown in the following 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 using the Grid layout model
.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;
}
DEMO
Here is a fiddle which utilizes CSS Grid Layout syntax (inc. the polyfill) to provide a general gist.
Alternatively, Masonry may be able to achieve this, however long term this will always be dependent on JavaScript.
Responsive Web Design (RWD)
The CSS Grid Layout module includes several features to simplify the creation of responsive designs. Two pertinent features which address the issues raised in the comments are:
The fr unit should be used instead of specifying the relative column width as a percentage. The main benefit of the fr unit is that it avoids having to manually recalculate the percentage when the number of columns change via a media query - (You simply change the value for the number of columns only):
/* 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);
...
}
Three values that can be assigned to the grid-auto-flow property, namely row, column, and dense.
.wrapper {
grid-auto-flow: dense;
...
}
In some situations when row, or column values are used it can produce unwanted holes/gaps in the layout. When specifying dense an algorithm attempts to fill those holes/gaps in, however this can sometimes change the the order of the items. This feature is very similar to the way Masonry places items in a different position based on available vertical space.
DEMO FOR RWD
Here is a responsive fiddle that uses both the fr unit and the dense value to avoid any gaps/holes in the layout.
EDIT(5): Updated list of browsers supporting CSS Grid Layout.
EDIT(4): Added note regarding Chrome 57 implementing CSS Grid Layout spec.
EDIT(3): Added note regarding Firefox 52 implementing CSS Grid Layout spec.
EDIT(2): Add useful CSS Grid Layout features for achieving RWD
EDIT(1): Changed sample code to terse version and updated link to external fiddle
这篇关于带有双倍高光图片的Photowall的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
