个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在研究显示事件的流体网格部分。我有媒体查询来根据屏幕分辨率调整 div 的大小。如果所有的 div 都是相同的高度，它看起来很棒。但是，如果它们的 div 高度不同，则它们之间的垂直空间看起来很糟糕。我想知道是否有办法解决它。不确定它可以单独使用 css 来完成。可能需要一些 javascript。我附上了两张图片:一张是它的样子，一张是我想要的样子。 HTML 代码如下。
<style>
body {
background-color:#dedede;
margin:0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
#pagewrap {
width: 100%;
margin: 10px auto;
}
.box {
box-sizing:border-box;
padding:10px;
margin:6px;
max-width:220px;
border:solid 1px #ccc;
background-color:#fff;
float:left;
}
@media screen and (max-width: 1200px) {
.box {
width:19%;
margin:.5%;
}
}
@media screen and (max-width: 980px) {
.box {
width:23.75%;
margin:.5%
}
}
@media screen and (max-width: 650px) {
.box {
width:31%;
margin:1%;
}
}
@media screen and (max-width: 565px) {
.box {
width:46%;
margin:2%;
}
}
@media screen and (max-width: 360px) {
.box {
width:90%;
}
}
</style>
</head>
<body>
<div id="pagewrap">
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultricesneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdumneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
</div>
</body>
目前的样子: 
(来源:asingularcreation.com)
我希望它看起来像什么: 
(来源:asingularcreation.com)
感谢您的帮助!
最佳答案
如果你打算只支持现代浏览器，你可以使用 CSS3 multi-column layouts .
#pagewrap {
width: 100%;
margin: 10px auto;
-webkit-column-width: 220px;
-moz-column-width: 220px;
column-width: 220px;
}
.box {
box-sizing:border-box;
padding:10px;
margin:6px;
max-width:220px;
border:solid 1px #ccc;
background-color:#fff;
display: inline-block;
vertical-align: top;
}
然而，对于跨浏览器解决方案，有 Vanilla Masonry Library如果你没有使用 jQuery，或者 Masonry jQuery plugin .两者都能满足您的需求。
关于javascript - 需要帮助删除网格中带有 div 的垂直空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16236855/
24
4
0
运行 Tomcat 失败并出现 java.lang.OutOfMemoryError - 与缺少 PermGen 空间相关的错误。 我最近将 Tomcat 更改为以自己的用户(而非 root)运行。
我们有一个表，其中包含数百万行，其中包含 PostGIS 几何图形。我们要执行的查询是:落在边界几何内的最新条目是什么？这个查询的问题是我们经常会有大量的项目匹配边界框(半径大约为 5 公里)，然后
我有一个Elasticsearch设置，它将允许用户搜索通配符作为索引。 array:3 [ "index" => "users" "type" => "user" "body" => arra
我创建了一个表，其中每行包含两个按钮，并且两个按钮连接在一起，我想将两个按钮分开。我用过 不起作用，css 也是，这是他们的另一种方式。 我有另一个问题，因为我不想在表格边框内显示操作按钮，而是在靠近
我试图在 jQuery Mobile 中的两个按钮之间留出空白。现实中的布局是这样的: Button 1 Button 2 (Hidden w/ display: none)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
您好，我对图表应用程序还很陌生。现在我为我的应用程序创建了条形图。当我运行 create bar chart as separate project 时，输出如下所示。 然后当我将条形图与我的应用程序
我在使用 H2 和 GeoDB(内存中，junit)时遇到问题。 另外，使用 Hibernate 5(每个包的最新版本，包括 hibernate-spatial)和 Spring 4。 通过 id 实
我想画一张澳大利亚的 map ，并将每个城市表示为一个点。 然后突出显示人口众多(> 1M)的城市 library(sp) library(maps) data(canada.cities) head
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 6年前关闭。 Improve this
如何保持.txt文件中存在的空格？在.txt文件中，它表示： text :text text1 :text1 text23 :text2 text345 :text3 如果我写这段
以下哪个键最大？ 选项 1:16 个数字 [0,9] 选项 2:30 个元音 选项 3:字母表中的 16 个字母 选项 4:32 位 有人可以帮助我，告诉我哪一个是正确的答案以及我们如何计算它吗？我知
在 Unity 3d 中使用 Azure 空间 anchor 来实现在 iOS 和 Android 上部署的室内和室外增强现实体验是否有益？ 最佳答案 是的，对于 Azure Spatial Anch
我有一个绝对定位的圆形图像。图像只需占据屏幕宽度的 17%，并且距离顶部 5 个像素。 问题是，当我调整图像大小以占据屏幕宽度的 17% 时，它会这样做，但同时容器会变长。图像本身不会拉伸(stret
我在 Ubuntu 14.04 上使用 Cassandra。从文档中，我可以看到运行命令: nodetool snapshot 创建我的 key 空间的快照。 命令的输出是: nodetool sn
Heroku引入了“私有(private)空间”，是否可以将现有应用迁移到私有(private)空间？ https://blog.heroku.com/archives/2015/9/10/herok
是否允许在语义记录中使用非绑定(bind)空格 或其他 HTML 编码字符？我遇到的问题是 ; 字符被软件视为记录的结尾。 例如:假设我有一份婚姻记录，其中包含 2 个结婚者的姓氏、结婚年份以及结
我正在研究“智能 parking ”项目，偶然发现了包含我们真正需要的YouTube视频。我们已经实现了第一部分，即从视频源进行实时透视变换，下一步是将其定义为一组矩形 我基本上需要知道他是如何做到的
我有两个类:Engine 和 Trainset(多个单元)，这两个类共享其 ID 空间，其中包含名称和系列 id=- . 这是我的Engine类(它是抽象的，因为有引擎的子类型(DieselEngin
如果有人能帮助我，那就太好了。 我正在尝试使用Java的Split命令，使用空格分割字符串，但问题是，字符串可能没有空格，这意味着它将只是一个简单的顺序(而不是“输入2”将是“退出”) Scanner
我是一名优秀的程序员,十分优秀！