html – 跨越多行列的动态网格图块

如果没有看到结果,这可能很难解释,所以请看看这些例子：

JSFiddle Example 1 – looks okay
JSFiddle Example 2 – broken

来自小提琴的代码：

HTML：


CSS：

#homepage-grid {
    width:910px;
    position:relative;
    padding:0;
    overflow: hidden;
}

#homepage-grid li {
    list-style:none;
    float:left;
    padding:0 12px 12px 0;
    display:block;
}

#homepage-grid li.last {
    list-style:none;
    float:left;
    padding:0 0 12px 0;
}

#homepage-grid li a {
    display:block;
}

基本上我想创建的是一个动态网格,它由数据库填充(数据库部分目前工作正常).在网格中,每个磁贴最多可以跨越3列,但是可以跨越无限行,这似乎是我遇到问题的地方.
我在使用HTML / CSS时遇到了麻烦.正如您所看到的,从示例1到示例2的一个小的改变,它打破了大部分网格,因为左下方的区块应该被向上推以填充空间,并且右侧区块应该向上移动以填充该空间.
但是,我可以完全控制代码,因此HTML / CSS可以根据需要进行更改(即添加类/内联样式/等).
我想这可以(相对)轻松地使用表格,但由于它不是表格内容,我真的不想走这条路.
有没有办法让CSS变得动态？
我需要使用更多的内联样式来实现这一目标吗？
我应该以其他方式这样做,例如绝对定位而不是漂浮？
任何有关如何实现这一目标的帮助将不胜感激.


最佳答案
你将使用浮动遇到这个问题.但是,您可以更改该页面上一个元素的位置,并且所有内容都会像您期望的那样落实到位.
Updated Fiddle
将以下内容添加到CSS中：

#homepage-grid li#tile10 {
    position: absolute;
    top: 342px;
}

这会将违规元素从文档流中分离出来,从而消除了对应用于其余列表项的“float”分配给它的垂直空间的保留.最后一项是浮动的,所以不会与绝对定位的瓷砖重叠.
编辑
根据下面的评论,here’s a slightly more flexible way of doing this.该示例适用于已发布的代码.
用更新的小提琴做出的假设：
> sizex1,sizey1,sizex2等……是常量值
>这些内容右侧的内容将被正确浮动(这将对左浮动项目反向运行,但这些情况似乎不会成为问题,因为如果左侧的元素,右侧的项目将正常浮动垂直放大)
>用户可以覆盖样式,或在布局创建时应用样式这主要是为了控制位置：绝对不必要地应用于某些元素
这是做什么的：
此CSS根据具有某些类的兄弟姐妹的存在设置不同的规则.这就是sizex1 sizex2 sizey1和sizey2值的恒定性很重要的原因.
CSS：

#homepage-grid li.col1:not(.row1):not(.row2) {
    position: absolute;
}
#homepage-grid li.col1.sizey1.row1 ~ li.col1.row2 { /* The first column of the first row has a sizey of 1 */
    top: 172px;
}
#homepage-grid li.col1.sizey2.row1 ~ li.col1.row2{ /* The first column of the first row has a sizey of 2 */
    top: 342px;
}
#homepage-grid li.col1.sizey1.row1 ~ li.col1.sizey1.row2 ~ li.col1.row3 { /* The first column of the first row has a sizey of 1 and the first column of the first row has a sizey of 1 */
    top: 344px;
}
#homepage-grid li.col1.sizey2.row1 ~ li.col1.sizey2.row2 ~ li.col1.row3{ /* The first column of the first row has a sizey of 2 and the first column of the second row has a sizey of 2 */
    top: 684px;
}
#homepage-grid li.col1.sizey2.row1 ~ li.col1.sizey1.row2 ~ li.col1.row3,#homepage-grid li.col1.sizey1.row1 ~ li.col1.sizey2.row2 ~ li.col1.row3 { /* The first column of the first row has a sizey of 2 and the first column of the second row has a sizey of 1,or vice versa */
    top: 514px;
}

理想情况下,您需要在页面传递时设置#homepage_grid li.col1值.这样,您可以选择哪些切片从文档流中分离出来以保持正确的间距.我通常使用：not()选择器完成此操作,但如果您正在寻找较旧的浏览器兼容性,则可以轻松使用覆盖.
例：

#homepage-grid li.col1:not(.row1):not(.row2) {
    position: absolute;
}

*以上只会破坏文档流程中的第3行和更多行.

#homepage-grid li.col1 {
  position: absolute;
}
#homepage-grid li.col1.row1,#homepage-grid li.col1.row2 {
  position: static;
}

这完成了与上面相同的事情,但更加冗长.但是,它将在不太符合标准的浏览器中正确呈现.
编辑2
为了清楚起见,这是一个使用jQuery在页面加载时将相应元素设置为静态的示例.
Another fiddle example

html – 跨越多行列的动态网格图块

相关文章