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

Posted 2023-03-05

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

【英文标题】：How to make list of floated elements jump over centered element (spine align / center stamp)?

【发布时间】：2012-07-23 01:00:59

【问题描述】：

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

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

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

【问题讨论】：

您希望所有项目都居中对齐吗？

【参考方案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;
    

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

【讨论】：

太好了，感谢您的回答！不过这里有点棘手：如果容器是 100% 宽度并且每行的项目数是动态的怎么办？除此之外，我需要将中心标记定位：固定，因此只有项目滚动而不是中心标记。

@user1540416--position: fixed 不是问题，因为代码可以很容易地与之产生差距。但是，此解决方案无法解决 100% 宽度（灵活宽度）和元素的动态数量。它要求您知道中心点每侧的元素的宽度和数量。

是的，你是对的。我想知道这是否可以用一些 JS 来完成。

@user1540416--我确信 JS 也可以产生一个干净的解决方案。我实际上提出了一个纯 CSS 方法，假设您知道项目元素的宽度（并且它们都是相同的）。查看我的更新。

@ScottS 那里有一些有趣的代码！非常感谢！我最终使用了一种更传统的方式，只使用带有 CSS 表格单元样式的左、中和右 div，以获得更好的浏览器支持和简单的 CSS2。我会尽快发布代码。