Question

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

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

如果没有单独的＆＃34; left＆＃34;和＆＃34;对＆＃34;的div？

Answer 1

此代码适用于CSS3浏览器（see fiddle;注意，在IE8及更低版本中，以及其他不支持它的人，nth-child必须由类替换在每个需要“跳过”脊柱中心的元素上）。 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;
    }
}

注意：关键是将宽度重置为允许的块数，然后覆盖上一个宽度的nth-child选择器，将其重新置于10px边距，然后设置nth-child的新计数。

如何使浮动元素列表跳过居中元素（脊柱对齐/中心标记）？

1 个答案:

可选解决方案

更“灵活”（仍然是CSS3）解决方案