Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как сверстать шаблон вывода контента, 2 блока по бокам и один между ними?

Как сверстать шаблон вывода контента, 2 блока по бокам и один между ними?


     15.10.2016    Общие вопросы по вёрстке, Шаблоны (TPL)    630

вопрос
Не могу понять, как такое можно осуществить... Увидел на сайте про авто, реализация очень интересная. Идет лента контента и в середине идет общий блок рубрики и там уже 5 блоков контента, 1 по центру (большой) и 2 по бокам. Так вот, как вывести через custom такое чудо? Вот тут реализовано - http://www.kolesa.ru/
Помогите пожалуйста с этим вопросом
Как сверстать шаблон вывода контента, 2 блока по бокам и один между ними?

Ответа пока нет


10 комментариев

irrwisch
Юзер

irrwisch - 16 октября 2016 13:41 -

Такое можно легко сделать с помощью flex

baseroad
Юзер

baseroad - 16 октября 2016 14:00 -

irrwisch, Помогите сверстать пожалуйста такой блок

redissx
Юзер

redissx - 16 октября 2016 20:31 -

2 шаблона, с помощью тега newscount в .tpl меняем вывод.

matthew_ellington
Юзер

matthew_ellington - 16 октября 2016 20:46 -

Существует такой замечательный псевдокласс :nth-child

baseroad
Юзер

baseroad - 17 октября 2016 15:28 -

redissx,помогите сверстать пожалуйста... Сам не справляюсь(((

Nigativ
Юзер

Nigativ - 17 октября 2016 16:10 -

Вот так можно!
HTML:

<div class="container">
<div class="left">Левый блок</div>
<div class="main">Центр</div>
<div class="right">Правый блок</div>
</div>


CSS:

.container {
  width:100%;
  display:flex;
}
.left{
  width:200px;
  float:left;
}
.right{
  width:400px;
  float:right;
}
.main{
  width:100%;
}

Ширину левого и правого блока ставьте свои.

irrwisch
Юзер

irrwisch - 17 октября 2016 17:25 -

И как Вы собираетесь в данной конструкции вывести 5 новостей из 1 tpl файла?

irrwisch
Юзер

irrwisch - 17 октября 2016 17:26 -

Раз сами не можете справиться, то вперёд в стол заказов, с оглашением бюджета.

baseroad
Юзер

baseroad - 17 октября 2016 18:32 -

Nigativ,
справа и слева выведутся 2 картинки по вертикали?

redissx
Юзер

redissx - 18 октября 2016 08:09 -


                    <div class="wrapper">
                        {custom template="custom-mozaik" from="0" limit="5" cache="no"}
                    </div>



[newscount=1,3]
<div class="item-small"></div>
[/newscount]
[newscount=2]
<div class="item-big"></div>
[/newscount]
[newscount=4,5]
<div class="item-small moved"></div>
[/newscount]




.wrapper {display:flex; flex-flow:row wrap; justify-content:space-between;}
.item-small, .item-big {width:30%; background-color:#CCC;}
.item-small {height:200px;}
.item-big {height:420px;}
.moved {margin-top:-200px;}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх