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



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

#1 Audir853

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

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

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

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

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

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


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как сделать вывод из БД в таблицу в три столбца и три ряда?
  2. Как задать количество колонок?
  3. Ссылка "Подробнее..."
  4. Как вывести картинки на сайте в несколько колонок
  5. Вывод постов в четыре колонки.

#2 fedornabilkin

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

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

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


  • 0

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



#3 yury

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

Отправлено 03 Март 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 Март 2018 - 11:32

  • 1

#4 fedornabilkin

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

Отправлено 04 Март 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
  • Пользователь
  • 204 сообщений
  • Репутация: 0

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

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

http://artseoy1.beget.tech/


  • 0

#6 fedornabilkin

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

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

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

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


  • 0

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



#7 yury

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

Отправлено 13 Март 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 Март 2018 - 16:18

  • 0


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