css - 如何使 float 元素列表跳过居中元素(书脊对齐/中心标记)？

Question

我有这个代码:http://jsfiddle.net/XXu8G/

我希望元素与书脊周围的中心对齐。 Isotope jQuery 插件有一个类似的功能，叫做 spine align:http://isotope.metafizzy.co/custom-layout-modes/spine-align.html但不幸的是，它在每一侧只列出了一个元素。我想每边都有多个元素。

如果没有单独的“左”和“右”div，如何实现这些？

Answer 1

此代码适用于 CSS3 浏览器( see fiddle ；请注意，在 IE8 及以下版本以及其他不支持它的浏览器中，nth-child 必须由 class 替换 在每个需要“跳过”脊柱中心的元素上)。 center-stamp 需要成为列表的一部分才能使其适合我(但请参阅下面的可选解决方案)。

#container {
    width: 380px;
    margin: 0 auto;
    overflow: hidden;
}

#items li#center-stamp { 
    width:100px; 
    height:100px; 
    background:red; 
    margin: 0 -240px 0 140px;
}
#items li { 
    width:50px; 
    height:50px; 
    background:#ccc; 
    margin:10px; 
    float:left; 
    display:block; 
}

#items li:nth-of-type(4n) {
    margin-left: 110px;
}

可选方案

如果 center-stamp 纯粹是表示性的，它可以像这样移动到伪元素 ( see fiddle )。

#container {
    width: 380px;
    margin: 0 auto;
    overflow: hidden;
}

#items:before { 
    content: '';
    width:100px; 
    height:100px; 
    background:red; 
    margin: 0 -240px 0 140px;
    float: left;
    display: block;
}
#items li { 
    width:50px; 
    height:50px; 
    background:#ccc; 
    margin:10px; 
    float:left; 
    display:block; 
}

#items li:nth-of-type(4n+3) {
    margin-left: 110px;
}

更“灵活”(仍然是 CSS3)的解决方案

对于灵活宽度和动态元素数量的新需求，假设元素宽度是标准的，仍然有纯CSS3解决方案。它是通过明智地使用 @media 查询(可能最好由 LESS 或 SCSS 等 css 预处理器生成)来完成的，您需要对查询范围设置一个实际限制。 Here's a fiddle以及其中的 css 代码:

#container {
    width: 100%;
    overflow: hidden;
}

#center-stamp {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    background-color: red;
    z-index: -1;
}

#items {
    overflow: hidden;
    width: 240px;
    margin: 0 auto;
}

#items li { 
    width:50px; 
    height:50px; 
    background:#ccc; 
    margin:10px; 
    display: block; 
    float: left;
}

#items > li:nth-child(2n) {
    margin-left: 110px;
}

@media all and (min-width: 380px) {
    #items {
        width: 380px;
    }
    #items > li:nth-child(2n) {
        margin-left: 10px;
    }    
    #items > li:nth-child(4n+3) {
        margin-left: 110px;
    }
}

@media all and (min-width: 520px) {
    #items {
        width: 520px;
    }
    #items > li:nth-child(4n+3) {
        margin-left: 10px;
    }    
    #items > li:nth-child(6n+4) {
        margin-left: 110px;
    }
}

@media all and (min-width: 660px) {
    #items {
        width: 660px;
    }
    #items > li:nth-child(6n+4) {
        margin-left: 10px;
    }    
    #items > li:nth-child(8n+5) {
        margin-left: 110px;
    }
}

注意:关键是将宽度重置为允许的 block 数，然后覆盖之前宽度的nth-child选择器，将其放回 10px 边距，然后为 nth-child 设置新计数。