jquery - 使用百分比宽度将元素集中在 div 上

Question

我的网站上有一种“马赛克”，他在一个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

Just click here to go to the Fiddle.

技术细节

calculateMainContainerWidth 函数运行良好 — 它正在计算容器的宽度，但我无法使用 margin: 0 auto; 完美地集中。当然这背后有一个逻辑冲突阻止我集中，但我想知道是什么。

引用资料

马赛克由 Packery, a Metafizzy's plug-in 制作.

进展

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

Answer 1

我找到了一个更简单的方法来解决我的头痛问题。

我使用的是 Packery's plugin, by Metafizzy经过一番研究，我发现他本身并没有集中布局。然后，我毫不犹豫地切换到Isotope。 ，由同一创作者，Metafizzy .

不幸的是，起初我没有找到解决方案。起初，同位素似乎没有中心化资源，直到我找到this extension。 ，由 Beau Smith 创建, 它集中并与排水沟一起工作。毕竟，我的马赛克居中。 =)

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