Question

所以这是我第一次在这里提问 - 我通常会以其他方式找到或解决问题。无论如何，我制作了一个基于网格的网站（完全由可见的相同大小的图块组成），我需要它才能响应，即根据broswer的大小调整方式调整行数和列数，以及那些戏剧性的调整，瓷砖简直是流动的。而且我需要瓷砖无缝 - 我不能在它们之间放置任何边框。我的问题是，大多数浏览器宽度不能均匀地划分为整齐的偶数像行和列。我正在考虑使用JavaScript来检测和计算每一侧的未使用空间，并将该数量添加到随机行和列中。有没有更好的方法来解决这个问题？非常感谢您提出的任何建议！

这是我目前的代码（我没有包含我的解决方案，因为我认为它有两个hacky，乏味且容易出错）。

.tile {
    width:14.2857%;
    height:14.2857%;
    margin:0;
    padding:0;
    float:left;
}

    <div id="macroTile">
        <div id="firstRow">
            <div id="tileZeroZero" class="tile"><p>(0, 0)</p></div>
            <div id="tileZeroOne" class="tile"><p>(0, 1)</p></div>
            <div id="tileZeroTwo" class="tile"><p>(0, 2)</p></div>
            <div id="tileZeroThree" class="tile"><p>(0, 3)</p></div>
            <div id="tileZeroFour" class="tile"><p>(0, 4)</p></div>
            <div id="tileZeroFive" class="tile"><p>(0, 5)</p></div>
            <div id="tileZeroSix" class="tile"><p>(0, 6)</p></div>
        </div>

        <div id="secondRow">
            <div id="tileOneZero" class="tile"><p>(1, 0)</p></div>
            <div id="tileOneOne" class="tile"><p>(1, 1)</p></div>
            <div id="tileOneTwo" class="tile"><p>(1, 2)</p></div>
            <div id="tileOneThree" class="tile"><p>(1, 3)</p></div>
            <div id="tileOneFour" class="tile"><p>(1, 4)</p></div>
            <div id="tileOneFive" class="tile"><p>(1, 5)</p></div>
            <div id="tileOneSix" class="tile"><p>(1, 6)</p></div>
        </div>

        <div id="thirdRow">
            <div id="tileTwoZero" class="tile"><p>(2, 0)</p></div>
            <div id="tileTwoOne" class="tile"><p>(2, 1)</p></div>
            <div id="tileTwoTwo" class="tile"><p>(2, 2)</p></div>
            <div id="tileTwoThree" class="tile"><p>(2, 3)</p></div>
            <div id="tileTwoFour" class="tile"><p>(2, 4)</p></div>
            <div id="tileTwoFive" class="tile"><p>(2, 5)</p></div>
            <div id="tileTwoSix" class="tile"><p>(2, 6)</p></div>
        </div>

        <div id="fourthRow">
            <div id="tileThreeZero" class="tile"><p>(3, 0)</p></div>
            <div id="tileThreeOne" class="tile"><p>(3, 1)</p></div>
            <div id="tileThreeTwo" class="tile"><p>(3, 2)</p></div>
            <div id="tileThreeThree" class="tile"><p>(3, 3)</p></div>
            <div id="tileThreeFour" class="tile"><p>(3, 4)</p></div>
            <div id="tileThreeFive" class="tile"><p>(3, 5)</p></div>
            <div id="tileThreeSix" class="tile"><p>(3, 6)</p></div>
        </div>

        <div id="fifthRow">
            <div id="tileFourZero" class="tile"><p>(4, 0)</p></div>
            <div id="tileFourOne" class="tile"><p>(4, 1)</p></div>
            <div id="tileFourTwo" class="tile"><p>(4, 2)</p></div>
            <div id="tileFourThree" class="tile"><p>(4, 3)</p></div>
            <div id="tileFourFour" class="tile"><p>(4, 4)</p></div>
            <div id="tileFourFive" class="tile"><p>(4, 5)</p></div>
            <div id="tileFourSix" class="tile"><p>(4, 6)</p></div>
        </div>

        <div id="sixthRow">
            <div id="tileFiveZero" class="tile"><p>(5, 0)</p></div>
            <div id="tileFiveOne" class="tile"><p>(5, 1)</p></div>
            <div id="tileFiveTwo" class="tile"><p>(5, 2)</p></div>
            <div id="tileFiveThree" class="tile"><p>(5, 3)</p></div>
            <div id="tileFiveFour" class="tile"><p>(5, 4)</p></div>
            <div id="tileFiveFive" class="tile"><p>(5, 5)</p></div>
            <div id="tileFiveSix" class="tile"><p>(5, 6)</p></div>
        </div>

        <div id="seventhRow">
            <div id="tileSixZero" class="tile"><p>(6, 0)</p></div>
            <div id="tileSixOne" class="tile"><p>(6, 1)</p></div>
            <div id="tileSixTwo" class="tile"><p>(6, 2)</p></div>
            <div id="tileSixThree" class="tile"><p>(6, 3)</p></div>
            <div id="tileSixFour" class="tile"><p>(6, 4)</p></div>
            <div id="tileSixFive" class="tile"><p>(6, 5)</p></div>
            <div id="tileSixSix" class="tile"><p>(6, 6)</p></div>
        </div>
    </div>

Answer 1

我使用了一个名为vgrid（https://github.com/xlune/jQuery-vGrid-Plugin）的jQuery插件。它工作得非常好并响应浏览器宽度以重新排列磁贴。它还可以处理不同高度的瓷砖。这是他们的演示页面，类似于您的要求：http://blog.xlune.com/2009/09/vgrid/demo008.html

从我可以告诉你的样本html应该按原样使用该网格

创建CSS网格

1 个答案: