Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.09.2015, 12:41
Новичок на форуме
Отправить личное сообщение для js_newbie Посмотреть профиль Найти все сообщения от js_newbie
 
Регистрация: 31.05.2015
Сообщений: 5

Подскажите с размещением блоков
При вёрстке страницы столкнулся с проблемой, что не могу выставить блоки в заданом порядке. В моём случае блок "Bags"(тот, что высокий) портит всю малину. Пробовал через флекс, пока что остановился на флоате. Может можно как-то с этим блоком разобраться, что бы всё вышло как на макете?
<main>
      <figure class="huge">
        <img src="img/greenTshirt.png" alt="">
        <figcaption>T-Shirts</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/cards.png" alt="">
        <figcaption>Cards</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/pens.png" alt="">
        <figcaption>Pens &amp; Pencils</figcaption>
      </figure>
      <figure class="wide">
        <img src="img/notebooks.png" alt="">
        <figcaption>Notebooks</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/toys.png" alt="">
        <figcaption>Toys</figcaption>
      </figure>
      <figure class="high">
        <img src="img/bags.png" alt="">
        <figcaption>Bags</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/scrum.png" alt="">
        <figcaption>Scrum cards</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/magnets.png" alt="">
        <figcaption>Magnets</figcaption>
      </figure>
      <figure class="big">
        <img src="img/redCaps.png" alt="">
        <figcaption>Caps</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/magnets.png" alt="">
        <figcaption>Magnets</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/pens.png" alt="">
        <figcaption>Pens &amp; Pencils</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/toys.png" alt="">
        <figcaption>Toys</figcaption>
      </figure>
  </main>

Код:
figcaption
{
	position: absolute;
	width: 100%;
    height: 41px;
	bottom: 0px;
	padding-top: 13px;
	padding-left: 20px;
    font-size: 21.333px;
    font-family: "SegoeUIBold";
    opacity: 0.8; 
    background-color: #FFF;
}

figure
{
	position: relative;
	cursor: pointer;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
Изображения:
Тип файла: jpg макет.jpg (28.5 Кб, 9 просмотров)
Тип файла: jpg результат.jpg (24.3 Кб, 7 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт выравнивания высоты блоков razorg1991 Элементы интерфейса 13 15.01.2017 00:04
подскажите пожалуйста эффекты для показа нескольких блоков по скроллу greenwar jQuery 12 09.09.2014 19:50
Удаление глюков при появлении и исчезании блоков Сершей jQuery 5 25.08.2013 03:20
Подскажите как поступить. merzavchick jQuery 9 24.08.2012 23:57
Не правильно работает прокрутка, подскажите как сделать правильно? denfer12 Общие вопросы Javascript 0 09.05.2012 00:34