这种布局的最佳方法是什么？

Question

我知道我可以使用边距和填充来实现我想要的效果。但是，这似乎有点......我不知道，我想这很奇怪。我觉得还有一个......结构化的？这样做的方式？

这就是我想要做的事情：

你怎么建议我这样做？任何建议都表示赞赏。

谢谢！

Answer 1

哦，伙计，我爱上了一个css网格系统，很容易实现和理解。看看它，它被称为960 Grid System。虽然它是为960px制作的，但它很容易改变。

<div class='container_4'><!-- this will be a container that takes up four grid spots-->
    <div class='grid_1 alpha'><!-- this will start from the first column in the container and will take one spot-->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
    <div class='grid_1'><!-- this takes up next spot and extends one col -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
    <div class='grid_1'><!-- this takes up next spot and extends one col -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
    <div class='grid_1 omega'><!-- this takes up last spot and extends one col -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
</div> <!-- end the container -->

alpha和omega类连续出现第一个和最后一个网格项。