- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个图 block (或 div)容器,我希望容器居中,而图 block 在容器中左对齐。
所以如果窗口很小:
..[s][s][s]..
..[s][s].....
如果窗口加宽一点:
...[s][s][s]...
...[s][s]......
进一步:
.[s][s][s][s].
.[s]..........
我试过:
#container's-parent: { display: block; text-align: center; }
#parent: { display: inline-block; text-align: left; }
.tiles: { display: inline-block }
但这似乎不起作用。
我希望它至少能在 Chrome 中运行,但我还需要最终支持最新的 FF、Safari 和 IE 10+
最佳答案
FWIW:现在是 2017 年,grid layout module 开箱即用 (codepen demo)。如果 browser support 适合你 - 然后使用网格。如果没有,请继续阅读....
如@Skadi2k3 的回答中所述,您可以使用 CSS 做的最好的事情是使用一系列媒体查询。
话虽这么说,如果您使用的是 LESS 这样的预处理器,这并不是一项困难或容易出错的任务。 (虽然,是的,CSS 仍然会又长又丑)
以下是如何利用 LESS 设置媒体查询:
像这样设置迭代混合:(您可以将此代码粘贴到 http://less2css.org 中)
@item-width:100px;
@item-height:100px;
@margin: 5px;
@min-cols:2;
@max-cols:12; //set an upper limit of how may columns you want to write the media queries for
.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
@media (min-width:@index-width) {
#content{
width: @index-width;
}
}
.loopingClass(@index-width + @item-width);
}
.loopingClass (@item-width * @min-cols);
上面的mixin会吐出一系列媒体查询的形式:
@media (min-width: 200px) {
#content {
width: 200px;
}
}
@media (min-width: 300px) {
#content {
width: 300px;
}
}
@media (min-width: 400px) {
#content {
width: 400px;
}
}
...
@media (min-width: 1200px) {
#content {
width: 1200px;
}
}
所以用一个简单的标记,比如:
<ul id="content">
<li class="box"></li>
<li class="box"></li>
...
<li class="box"></li>
</ul>
剩余 CSS(LESS):
#content {
margin:0 auto;
overflow: auto;
min-width: @min-cols * @item-width;
max-width: @max-cols * @item-width;
display: block;
list-style:none;
background: aqua;
}
.box {
float: left;
height: @item-height - 2 *@margin;
width: @item-width - 2*@margin;
margin:@margin;
background-color:blue;
}
...你得到了想要的结果。
我需要做的就是根据我的需要更改我在 LESS mixin 中使用的变量 - 我得到了我想要的确切布局。
假设我有 300px X 100px 的元素,最少有 2 列,最多有 6 列,边距为 15px - 我只是像这样修改变量:
@item-width:300px;
@item-height:100px;
@margin: 15px;
@min-cols:2;
@max-cols:6;
关于html - 如何让瓷砖同时居中和左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21146847/
当我在 map 上放大得足够远时,TileLayer 消失,我看到一堆图 block ,上面写着“ map 数据尚不可用”。我相信这些图 block 可能来自提供商,但我不确定(我正在使用 ESRI
我有代码用红色方 block 填充浏览器窗口。 这个脚本正在寻找一条对 Angular 线,并且应该稍有延迟地依次改变每条对 Angular 线的颜色。也就是说,首先左上角的瓷砖变成不同的颜色,然后对
我是 Spring 框架的新手。在我的项目中,我使用 Spring 框架和 tiles 2(菜单、页眉、正文和页脚)。我想创建动态菜单并将其加载到菜单图 block (为菜单图 block 创建 Co
当包含的文件非常大时,似乎会产生开销。这与文件的内容无关,只是其大小,该文件除了注释掉的文本之外什么都没有 insertTemplate 的时间与文件的大小成正比。 comments.jsp 看起
有没有人有任何集成 Tiles 的经验进入Grails (而不是 SiteMesh)? 我找到了几篇这样的文章:http://devdevdev.wordpress.com/2009/01/据我所知,
使用 pygame 库在 python 中制作一个方 block 游戏。在游戏中,通过函数的计时器应该从左上角开始工作。一切都为我显示,但由于某种原因,该帐户未保留。你需要考虑我需要一个带秒的变量,因
有什么区别 和 你能举个例子吗? 最佳答案 参见 http://tiles.apache.org/2.2/framework/tiles-jsp/tlddoc/tiles/insertAttrib
我正在使用 spring mvc + tiles。在我的 web.xml 中我有 dispatcher org.springframework.web.servlet
我知道以前曾发布过类似主题的问题,但我遇到了一个在任何其他问题中都没有见过的错误。 我试图从二维数组制作平铺背景,但是当我运行它时,我收到此错误: current_tile = 纹理[tilemap[
我正在尝试使用 openMapTiles 矢量图 block 进行车辆路线。它似乎是一个加载速度非常快的数据源。我打算模拟很多车辆,所以重复查询 google maps api 不是一种选择。 有没有
我最近刚开始编程并遇到了这个问题。 如何计算瓷砖地板需要多少 block 瓷砖?地砖是一个宽度为20的正方形,地板的长度和宽度由用户输入。 我可以使用%计算出我需要多少个完整的瓷砖,但是一旦我到达侧面
我是 OpenLayers 的新手,想从 Google Maps API 切换过来。 现在我正在尝试找出如何将大图像放入 OpenLayers 中,就像我可以使用 Google Maps API 那样
Ionic 在加载 map 时会显示这些 splinter 的图 block 。 我试过从 Leaflet 加载 bower 和直接加载,但没有任何改变。我正在使用一个特殊的 Leaflet 指令,但
对于非视网膜我正在使用此代码请帮助如何在 ipad 中制作视网膜显示 我试过 Retina 项目
我已经通过 Active perl 安装了 Geo-OSM-Tiles。但问题是我不知道它安装在哪个路径。我还需要终端命令通过 Geo-OSM-Tiles(Active perl)下载图 block
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
我想将 tiles 定义名称直接写到模板中。但是我不知道如何访问定义名称。 为了说明我想做什么,请看一下这个解决方法:
今天早上花了一段时间寻找一个概括性的问题,以指出有关 as_strided 和/或 how to make generalized window functions 的问题的重复项。关于如何(安全地)
所以我正在编写一个面向对象的 Tile Slider Puzzle 游戏,我感觉好像我的代码是正确的,而且当我构建项目时,没有抛出任何错误。但是,当我运行我的代码(Visual Studio 2015
我正在使用 Spring MVC 3 和 Apache Tiles 3。 我想为我的其中一个页面添加自定义标题。我希望这个标题存在于特定的 View jsp 中而不是布局 jsp 中。 这是我正在做的
我是一名优秀的程序员,十分优秀!