Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 81 0 тем, 9 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #5

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #6

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография BLIK
    #7

    BLIK
    Очков активности: 33 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #8

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 22.09.2018
Топ 5 участников по репутации


Подскажите как сделать 2 колонки?

#1 Audir853

Audir853
  • Пользователь
  • 206 сообщений
  • Репутация: 0
0

Отправлено 02 March 2018 - 19:55

Здравствуйте. дело вот в чем: 

на этой странице http://artseoy1.beget.tech/dvigateli/ есть фильтр товаров по середине, и он распластан на всю ширину, кто знает, как через CSS сделать две-три колонки?

чтобы выглядело примерно как тут фильтр http://motorbor.by/

заранее спасибо.


 

 

  • 0

#2 fedornabilkin

fedornabilkin
  • Модератор
  • 1127 сообщений
  • Репутация: 189

Отправлено 02 March 2018 - 21:02

Так на том сайте и посмотри как сделано. Кликаешь правой кнопкой и инспектируешь элемент. Инспектор покажет тэги и правила к ним.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#3 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 03 March 2018 - 11:29

Здравствуйте. дело вот в чем:  на этой странице http://artseoy1.beget.tech/dvigateli/ есть фильтр товаров по середине, и он распластан на всю ширину, кто знает, как через CSS сделать две-три колонки?

 
В принципе сделать то несложно. Примерно так:
В стилевом файле bootstrap.min.css есть правила для блоков с фильтрами. Выглядят они вот так:
 
.list-group{padding-left:0;margin-bottom:20px}
.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}
 
Если классу .list-group-item добавить обтекание и ширину в 50% ширины родителя (добавляем правила float:left;width:50%;), то получится 2 колонки:
 
.list-group-item{padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd;float:left;width:50%;}
 
Родителю .list-group не забыть добавить очистку потока (добавляем правило overflow:hidden;), чтоб обтекание после него прекратить:
 
.list-group{padding-left:0;margin-bottom:20px;overflow:hidden;}
 
Получится как-то так:
008ce26c40f9.jpg
 
Если ширину установить в 33%, то будет 3 колонки и т.д.

Но есть одно НО: Как повлияют и повлияют ли эти изменения на другие страницы предсказать сложно.

Сообщение отредактировал yury: 03 March 2018 - 11:32

  • 1

#4 fedornabilkin

fedornabilkin
  • Модератор
  • 1127 сообщений
  • Репутация: 189

Отправлено 04 March 2018 - 00:57

Если есть бутстрап на сайте, то почему бы не расположить блоки в таком порядке?

<div class="row">
<div class="col-xs-12 col-sm-6">block</div>
<div class="col-xs-12 col-sm-6">block</div>
</div>

col-xs-12 говорит, чтобы на очень маленьких мониторах блок был на всю ширину, а col-sm-6 говорит, чтобы на маленьких и выше блок был на пол ширины.


  • 1

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#5 Audir853

Audir853
    Topic Starter
  • Пользователь
  • 206 сообщений
  • Репутация: 0

Отправлено 12 March 2018 - 18:01

@yury, спасибо большое!! а можете подсказать, как проделать тоже самое, но вот тут на главной.

http://artseoy1.beget.tech/


  • 0

#6 fedornabilkin

fedornabilkin
  • Модератор
  • 1127 сообщений
  • Репутация: 189

Отправлено 13 March 2018 - 14:59

@Audir853, будь человеком, пожалуйста. Очень я не хотел отвлекаться на это, и когда выделил время, то не обнаружил никакого фильтра  на главной  :diablo:

Чтобы решить вопрос, предоставь код, который отвечает за отображение фильтра. Перед экспериментами, обязательно сделай бэкап.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#7 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 13 March 2018 - 16:16

@yury, спасибо большое!! а можете подсказать, как проделать тоже самое, но вот тут на главной.
http://artseoy1.beget.tech

 
Примерно так же и делается:
В стилевом файле style.css есть такое правило:
.mfilter-content > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
Если элементу списка добавить обтекание и ширину в 50% ширины родителя (добавляем правила float:left; width:50%), то получится 2 колонки:
.mfilter-content > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float:left;
  width:50%;
}
Получится как-то так:
e262f5b375c2.jpg

Но не уверен, что здесь стоит делать 2 колонки, т.к. первый из фильтров имеет сложную структуру, и при небольшой ширине экрана начинает занимать несколько строк, сбивая вид:
4b3be6b50a52.jpg

Сообщение отредактировал yury: 13 March 2018 - 16:18

  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru