3

我的网站上有一种“马赛克”，他在一个宽度以百分比测量的 div 内。

问题

如何在宽度以百分比测量的 div中集中内容（更具体地说，镶嵌）？

编码

HTML：

<div class="main-container">
    <div class="container">
        <div class="right">
            Some menu.
        </div>
        <div class="left">
            <ul class="list">
                <li>Showcase #1</li>
                <li>Showcase #2</li>
                <li>Showcase #3</li>
                <li>Showcase #4</li>
                <li>Showcase #5</li>
                <li>Showcase #6</li>
            </ul>
        </div>
    </div>
</div>

CSS：

.main-container {
    background-color: #c19fe2;
    width: 95%;
    margin: 0 auto;
}

.container {
    position: relative;
}

.left {
    background-color: #ebd6ff;
    width: 300px;
    height: 200px;
}

.left li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
}

.right {
    float: right;
    width: 270px;
    height: auto;
    padding: 15px;
    background-color: #8863ac;
}

jQuery/JavaScript：

/** Packery (jQuery Grid like Masonry/Prototype) **/
$(function() {
    var $container = $(".left");
    // initialize
    $container.packery({
        itemSelector: "li",
        gutter: 5
    });
});


/** Centralize the main container **/
function calculateMainContainerWidth() {
    $realWidth = $(".main-container").width() - $(".right").outerWidth(),
    $containerContent = $(".left");

    $containerContent.css("width", $realWidth);
}

$(window).on("resize", function() {
    calculateMainContainerWidth();
});

calculateMainContainerWidth();

调试，FiddleJS

只需单击此处即可转到 Fiddle。

技术细节

该calculateMainContainerWidth函数工作正常——它正在计算我的容器的宽度，但我不能用它margin: 0 auto;来完美地集中。当然，这背后有一个逻辑冲突阻止我去中心化，但我想知道是什么。

参考

马赛克由Metafizzy 的插件 Packery制作。

进步

看看我自己的答案——解决方案就在那里。

4

3 回答 3

2

我为我的头痛找到了一个更简单的解决方案。

我使用的是Metafizzy 的 Packery 插件，经过一些研究，我发现他本身没有集中式布局。然后，我毫不犹豫地切换到同一个创作者Metafizzy的Isotope。

不幸的是，起初我没有找到解决方案。起初，似乎 Isotope 没有集中资源，直到我找到了这个由Beau Smith创建的扩展，它集中并与排水沟一起工作。毕竟，我的马赛克居中。=)

我想向那些为我寻求解决方案的人道歉，但无论哪种方式，对于将来遇到同样问题的人来说，这都是一个替代方案。谢谢！

于 2013-06-05T12:01:41.290 回答
1

部分解决方案

我通过如下调整 CSS 找到了对居中问题的部分修复：

.left {
    background-color: #ebd6ff;
}
ul.list {
    margin: 0;
    padding: 0;
    max-width: 330px;
    margin: 0 auto;
}
ul.list li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
    margin: 0; 
    padding: 0;
}

诀窍是根据您期望的最大列数（在本例中为 5 x 55px）给出一个max-widthto 。ul.list

使用最大宽度并使用margin: 0 auto，列表将在.left容器中居中。

此外，由于 packery 使用绝对定位来放置元素，因此它有助于将边距和填充归零。

最后，将 packery 方法应用于.list而不是.left.

演示小提琴：http: //jsfiddle.net/audetwebdesign/Nsm2Z/

限制：一旦寡妇大小缩小，<li>元素开始形成两行或更多行，右侧就会有一些额外的空白。此时，布局由 packery bin-layout 算法确定，CSS 没有太多可以做的事情，因为<li>元素是绝对定位的，因此超出了常规内容的流动，常规居中技巧将不起作用。

于 2013-06-05T02:52:22.590 回答
0

我不知道为什么你需要所有的 JavaScript 和 jQuery 来将 a 水平居中<div>在一个容器中<div>。我通常只使用具有如下边距的 div：

#centeredContent
{
    margin: 0 auto;
}
于 2013-06-04T20:40:49.023 回答