Каков наилучший подход к этому типу макета?

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 -->

Классы альфа и омега идут по первому и последнему элементам сетки подряд.