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

你将使用浮动遇到这个问题.但是,您可以更改该页面上一个元素的位置,并且所有内容都会像您期望的那样落实到位.

将以下内容添加到CSS中：

#homepage-grid li#tile10 {

position: absolute;

top: 342px;

}

这会将违规元素从文档流中分离出来,从而消除了对应用于其余列表项的“float”分配给它的垂直空间的保留.最后一项是浮动的,所以不会与绝对定位的瓷砖重叠.

编辑

用更新的小提琴做出的假设：

> 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在页面加载时将相应元素设置为静态的示例.