Сетка 960, проблема img - PullRequest
Новая
       14

Сетка 960, проблема img

0 голосов
/ 10 марта 2011

недавно загрузил систему сетки 960, чтобы поиграться с ней.

Теперь проблема, с которой я сталкиваюсь, заключается в том, что изображение не попадает влево после закрытия тега автора песен.Обе колонки перед изображением в сумме дают ровно 12

. Следующий код должен отображать изображение логотипа вверху, описание автора песни справа от него.Затем в новой строке я должен увидеть заполнитель изображения серым цветом и абзац текста к записи этого.Однако в настоящее время он перепутан

Может кто-нибудь посоветовать мне, если мне нужно что-то изменить для размещения изображений

Вот ссылка на страницу http://digitalgenesis.com.au/sites/alice
и вот ссылка на то, как яв основном хотят, чтобы он проходил http://digitalgenesis.com.au/sites/alice/img/960img.gif

Код страницы 

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

       <title></title>
</head>

<body>
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>
</body>
</html>

вторая сетка 5 должна быть разделена на новый ряд

Ответы [ 2 ]

0 голосов
/ 10 марта 2011

Попробуйте это:

Поставьте сброс до 960.css, а затем добавьте очистку после первой строки.

нажмите здесь, чтобы увидеть пример jsfiddle

Вот мой код: 

<div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
    <div class="clear"></div>
    <div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
0 голосов
/ 10 марта 2011

Вы ищете clearfix класс, чтобы сбросить следующий набор делителей вниз 

<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="clearfix"></div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet,.... </div>
</div>
...