个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
最简单的图片库布局之一是正方形网格，图片居中，如下面的 Adobe Lightroom 屏幕截图。
(1) (2) (3) 类似的问题还有很多，但都涉及正方形图像和正方形网格。我的比较通用，因为它涉及矩形图像和正方形网格。
我花了很长时间尝试使用 css flexbox 和 inline-box 准确地重现下面的屏幕截图，但总是无法完全正确地居中:
flex :jsfiddle.net/rmodrak/4sxzkonr/
内联 block :jsfiddle.net/rmodrak/wmunqzL6/
很难相信 css 本身不支持这样的布局。我错过了什么吗？
最佳答案
试试这个:
编辑:添加响应式布局。
<!DOCTYPE html>
<html>
<head>
<style>
/*SO relevant*/
body{
background:#121212;
color:white;
}
/*Container styling*/
#container{
/*Important*/
width:25%;
min-width:220px; /*200px+subcontainer margin x 2+subcontainer padding x 2*/
min-height:220px; /*Same here*/
display:inline-block;
border:1px solid red; /*If you want to add a border, use box-sizing, see below*/
box-sizing:border-box; /*Hello im box-sizing man!*/
padding:0;
margin:0;
float: left;
}
/*Sub-container styling*/
#subcontainer{
/*Important*/
width:200px;
height:200px;
position: relative;
left: 50%;
-ms-transform: translateX(-52.5%);
transform: translateX(-52.5%);
/*SO relevant*/
background:#222222;
padding:5px;
margin:5px;
}
#subcontainer img{
/*important*/
display:block;
max-height:100%;
max-width:100%;
margin:0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/*Make it responsive on smaller devices*/
@media only screen and (max-width: 910px) {#container{width:33.3%;}}
@media only screen and (max-width: 690px) {#container{width:50%;}}
@media only screen and (max-width: 470px) {#container{width:100%;}}
</style>
</head>
<body>
<h2>Nice photos, nice boxes.</h2>
<p>Now with 100% more responsiveness!</p>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/3NgXgXkD/0001.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/h4x1WB2P/0002.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/FRkgK5mp/0003.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/kGrN61gm/0004.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/VvcMLJKs/0005.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/FzgSfh6y/0006.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/MTBVS7br/0007.jpg"></div></div>
<div id="container"><div id="subcontainer"><img src="https://i.postimg.cc/WpMgY74d/0008.jpg"></div></div>
</body>
</html>关于css - 带有 CSS 的响应式 Lightroom 风格网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56822146/
25
4
0
Textmate 语法(.tmLanguage 文件)有时以 XML 格式表示。 我想转换为更易读的格式(即 JSON 或 YAML)以集成到 VS Code 语法突出显示扩展中。 为了澄清我的意思，
如何通过 pandas 样式隐藏列标签？有一个 hide_index() 方法可以删除索引行，不幸的是 hide_column() 标签会删除整个列(标题和数据)。我只想隐藏标题。谢谢! 最佳答案 s
我正在考虑为一组服务使用 SOA 架构来支持我咨询的业务，以前我们使用数据库集成，其中每个应用程序从共享的 MS SQL 数据库中挑选出它需要的东西并使用它等等。我们有各种与怪物数据库(包括 java
所以我有以下代码，我想知道 Objective-C 中哪种“风格”被认为更好。 选项 1: id temp = [dictionary objectForKey: @"aBooleanValue"];
当创建一个没有类参数的对象时，我很难决定是否应该包含空括号。一个具体的例子:我正在与现有的 Java 代码交互，并创建一个实现名为 EventResponder 的接口(interface)的对象。我
我有一个抽象类Stack和一个扩展它的类:MyStack。我需要为 MyStack 创建一个复制构造函数。只传入 MyStack 对象更好，还是传入任何 Stack 对象更好？ public MySt
我正在考虑将那些在函数体中未修改的 Python 函数参数拼写为 ALL_UPPERCASE，向此类 API 的用户发出信号，表明传递的值不会被修改(如果一切都如广告所言，无论如何) )。我不知道这会
我的 build.gradle 文件、staging、stable 和 production 以及默认构建类型 debug 和 release。对于其中的每一个，我都有不同的 AAR 文件，例如，我有
假设我有以下文件: main.cpp 例程.cpp 例程.h 进一步假设 main.cpp 调用了在 routine.cpp 中定义的函数 routine()，但是 routine.cpp 还包含仅由
我对此进行了一些搜索，但实际上我还没有找到 MySQL 中用于创建外键的样式概念是什么 - 在创建表定义中或在 alter 语句中。谢谢。 最佳答案 何时创建外键: 如果在创建表时明确需要外键，则在创
您好，我正在尝试将 Android 应用风格(免费且完整)实现为动态壁纸。在 Eclipse 中，我曾经使用以下代码从我自己的 Android Activity 打开动态壁纸预览: I
我的 Android 应用程序有两种不同的风格，lite 和 pro。在应用程序中，我有一个名为 customFragment.java 的类，它包含在 main 中(不同风格之间没有区别)并且还包含
我有一个包含多个子目录的项目，如下所示: /opt/exampleProject/src ├── __init__.py ├── dir1 │ ├── __init__.py │ ├──
假设我们有类似的东西 int f(int n); .... do{ int a = b; int b = f(a); } 这样说有没有风险 do{ int b = f(b);
是否有风格指导或理由来选择其中一种模式而不是另一种？ 最小化上下文管理器下的代码量“感觉”更干净，但我无法指出具体原因。这可能只是偏好，并没有关于此事的官方指导。 1) 里面的所有代码都有上下文。 w
module Hints module Designer def self.message "Hello, World!" end
我正在开发一个具有多种风格的 android 项目。 这很好用，我可以自定义应用程序的元素，例如颜色和字符串资源。 我想让一些风格基于 AppCompat 浅色主题，一些基于 AppCompat 深色
因此，这不起作用，因为 seatsAvailable 是最终的。如何使用更多的 lambda 风格的从头开始的方式来完成我想要完成的事情？ final boolean seatsAvailable =
考虑以下代码: cpu_set_t cpuset; CPU_ZERO(&cpuset); CPU_SET(0, &cpuset); sched_setaffinity(0, sizeof(cpuset
从历史上看，我总是这样编写我的异常处理代码: Cursor cursor = null; try { cursor = db.openCursor(null, null
我是一名优秀的程序员,十分优秀！