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

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 类在一行中的第一个和最后一个网格元素上。