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

Question

我知道我可以只使用边距和填充来完成我想要的。但是，这似乎有点……我不知道，我猜很奇怪。我只是觉得有一个更...结构化？这样做的方法？

这是我想做的：

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

谢谢！

Answer 1

哦，伙计，有一个我喜欢的 CSS 网格系统，它很容易实现和理解。检查一下，它叫做960 Grid System。虽然它是为 960 像素制作的，但它很容易更改。

<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 类连续出现在第一个和最后一个网格项上。