Сетка 960 с тегом заголовка html5

Я новичок в 960.gs и испытываю некоторые проблемы с ним и html5.

Я пытаюсь сделать следующее: изображение должно занимать 2 единицы сетки, а в той же строке div должен занимать 5 единиц, а затем (потому что эта «строка» заполнена) строка должен следовать разрыв и должен отображаться заголовок. Я попробовал это следующим образом:

<div class="container_12">
    <header class="grid_12">
        <img src="nothing" class="grid_2 alpha"><div class="grid_5 suffix_5">SOMETHING</div>
        <h1 class="grid_2 omega">title</h1>
    </header>
</div>

В моем понимании 960.gs это должно создать желаемый эффект. На самом деле это не так: он отображает изображение на одной строке, а div и заголовок друг под другом и с небольшим отступом на следующей строке. Это из-за использования других элементов, кроме div?

Заранее спасибо за помощь! (Я получил много информации от http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/)


html css 960.gs
person phikes    schedule 01.02.2013    source источник
comment
Может быть, заголовок должен быть контейнером, а не сеткой?   -  person rodrigo-silveira    schedule 02.02.2013
comment
Разве заголовок не будет контейнером всей моей страницы? После закрывающего тега заголовка все еще есть контент (но, конечно, перед закрывающим тегом div), извините, я пропустил это.   -  person phikes    schedule 02.02.2013
comment
Дело в том, что вы не можете вкладывать сетки. Заголовок должен быть контейнером. Это нормально, чтобы братья и сестры заголовка также были контейнерами. Несколько контейнеров на странице — это не проблема. Каждая сетка должна быть потомком контейнера, а не других сеток. Есть смысл?   -  person rodrigo-silveira    schedule 02.02.2013
comment
Это действительно имеет смысл, но все равно не архивирует то, что я хочу: теперь у меня есть изображение слева и справа от моего div, а под этим div заголовок (но все еще на той же строке, что и изображение).   -  person phikes    schedule 02.02.2013
comment
На самом деле 960.gs должен уметь обрабатывать вложенные сетки (я читал об этом во многих местах в Интернете).   -  person phikes    schedule 02.02.2013
comment
В основном я думаю, что проблема с плавающей запятой изображения: слева. Кажется, что он подталкивает следующую строку сетки рядом с собой. Принудительный поплавок: нет; ломает все подряд.   -  person phikes    schedule 02.02.2013
comment
Что ж, кажется, что clear-div необходим ... Таким образом, он работает (тогда h1 имеет соответствующую альфу / омегу), но это не очень хорошо с точки зрения семантики. Любые другие подходы?   -  person phikes    schedule 02.02.2013

Ответы (1)


arrow_upward
1
arrow_downward 

<div class="container_12">
<header>
    <div class="grid_9">
        <div class="grid_2 alpha">
            <img src="http://showbuzz.ru/wp-content/uploads/2009/09/dead_earners_9_wenn1642245.jpg" class="grid_2 alpha" />  
        </div>
         <div class="grid_7 omega">
           SOMETHING
         </div>
         <div class="grid_9 alpha omega">
             <h1>title</h1>  
         </div>
    </div>
  </header>

http://jsfiddle.net/TMAk7/

Это работает для вас?

person Evgeniy    schedule 13.03.2013
comment
Это, к сожалению, то, чего я не хочу. Я хочу, чтобы заголовок текста был под картинкой :-/. - person phikes; 13.03.2013
comment
Да, точно. И это работает только с clear-div. Я пробовал примеси с меньшим количеством, и это работает для всех случаев, кроме этого clear-div. - person phikes; 13.03.2013