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

Question

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

JSFiddle示例1 - 看起来没问题
JSFiddle示例2 - 已损坏

来自小提琴的代码:

HTML:

<ul id="homepage-grid">
        <li id="tile11" class="col1 row1 sizex1 sizey1">
            <a href="#" title="test">
                <img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile8" class="col2 row1 sizex2 sizey1 last">
            <a href="#" title="test">
                <img src="http://placehold.it/602x160" alt="test" title="test" style="width: 602px;height: 160px" />
            </a>
        </li>
        <li id="tile1" class="col1 row2 sizex1 sizey1">
            <a href="#" title="testing">
                <img src="http://placehold.it/295x160" alt="testing" title="testing" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile4" class="col2 row2 sizex2 sizey1 last">
            <a href="#" title="test3">
                <img src="http://placehold.it/602x160" alt="test3" title="test3" style="width: 602px;height: 160px" />
            </a>
        </li>
        <li id="tile10" class="col1 row3 sizex1 sizey2">
            <a href="#" title="test">
                <img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
            </a>
        </li>
        <li id="tile12" class="col2 row3 sizex1 sizey2">
            <a href="#" title="test">
                <img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
            </a>
        </li>
        <li id="tile2" class="col3 row3 sizex1 sizey1 last">
            <a href="#" title="testing2">
                <img src="http://placehold.it/295x160" alt="testing2" title="testing2" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile9" class="col3 row4 sizex1 sizey1 last">
            <a href="#" title="test">
                <img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
            </a>
        </li>
    </ul>

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变得动态？
我需要使用更多的内联样式来实现这一目标吗？
我应该以另一种方式做到这一点,例如绝对定位而不是浮动？

任何有关如何实现这一目标的帮助将不胜感激.

Answer 1

使用浮动你会遇到这个问题。但是，您可以更改该页面上一个元素的位置，一切都会如您所期望的那样就位。

更新了小提琴

将以下内容添加到您的 CSS 中：

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

这会将有问题的元素从文档流中剔除，从而消除了通过应用于其余列表项的“浮动”分配给它的垂直空间的保留。最后一项向右浮动，因此不会与绝对定位的图块重叠。

编辑

根据下面的评论，这是一种稍微更灵活的方法。该示例适用于发布的代码。

使用更新的小提琴所做的假设：

1. sizex1、sizey1、sizex2 等...是常量值
2. 这些右侧的内容将向右浮动（这对于左侧浮动的项目将相反，但这些情况似乎不会成为问题，因为如果左侧的元素是，右侧的项目将正确浮动垂直方向更大）
3. 用户能够覆盖样式，或在创建布局时应用样式这主要是为了控制position: absolute不必要地应用于某些元素

这是做什么的：

该 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 在页面加载时将适当的元素设置为静态的示例。

另一个小提琴例子