Адаптивный товар в корзине, есть проблема с жатием блоков, как решить?

Question

[Антон Вебсайтовский]

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

По идее он должен переносить тогда когда у всех блоков не будет свободного пространства для сжатия.

Тут можно посмотреть в рабочем состоянии:
codepen.io/anon/pen/xgzKxz

Скрин:


Вторая проблема, при сжатие браузера до определенного момента, все блоки переносятся под фотографии, а блоков большая height, как уменьшить? я пробовал но чет не вышло, походу не хватает знаний.
Стрелочками пометил лишнее пространство.

Скрин:

Answer 1

[Антон Вебсайтовский]

Сделал как я хотел, адаптивные блоки с товарами в корзине.

Решение, там фотка фиксирована, но можно убрать у нее
min-width: 275px;

codepen.io/anon/pen/PWajeE

Фулл экран


Сжатый экран


Под телефоны

Answer 2

[Андрей Федоров]

В 2017 году верстать float'ами? Господи, да когда же это кончится!

.corzalltblock{
  display: flex; 
}

Comments

[Антон Вебсайтовский]

а почему float:left; или right плохо?

[Андрей Федоров]

Антон Вебсайтовский: Устаревший метод, требующий clear-fix.

[Антон Вебсайтовский]

а если надо будет прижать блок к правому краю тут без float не как, допустим на одной линии два дива, левый и правый.

слушай ага работает
.corzalltblock{
display: flex;
}

а как быть с border он ведь height:180px; все что в боках оно центрируется.
если сжимать окно брайзера, то и фото сжимает и блоки, а бордер нет, как тут быть?
вот вид такой c2n.me/3H9qeHR

некрасиво выглядит что картинка сжалась. ну и перенос перестал работать, а раньше блоки переносились, походу чет еще делать надо.

[Антон Вебсайтовский]

я так понимаю что не как нельзя сделать, пусть тогда height:180px; выходит что идет 6 блоков, картинку можно не трогать пусть будет как есть, при сжатии экрана до определенного момента она все равно как надо делается, а вот блоки где есть пространство, переносятся заранее не сжавшись, хотя я описывал проблему, с флексом, вообще ничего не переносит и фото начинает сжимать.

[Андрей Федоров]

Антон Вебсайтовский: 1. Вот вам 2 блока прижатых влево и право. codepen.io/aliencash/pen/JEZjpG
2. Работает, только на узких экранах, чтобы все перестраивалось вертикально нужно добавить в медиавыражение flex-direction: column
3. Зачем вы вообще центруете содержимое с помощью border? Это что за извращение? Есть куча нормально работающих способов, изучайте, пробуйте https://habrahabr.ru/company/netcracker/blog/277433/
4. чтобы понять как должно работать нужно видеть несколько макетов - с полной шириной, шириной 1024px, шириной 320px. без этого мы тут можем помочь решить только ту проблему, которую вы описали.

[Антон Вебсайтовский]

border я им не центрирую, бордер это обводка всех блоков и в каждом блоке справа полоса.
хороший способ, наверное не работает в старых браузерах codepen.io/aliencash/pen/JEZjpG

можно центровать так:
height: 200px;
line-height: 200px;
но это если текст в одну строку, если текст не в одну строку то будет большой отступ между текстами, из за line-height: 200px;

я центрую так:
display:table-cell;
vertical-align:middle;
height:180px;

чем он плох этот метод?

так там есть макет, сожми экран браузера, сжимай и увидишь перестройку.
и там вылезает вторая проблема связанная с height:180px;

добавил
media only screen and (max-width: 800px) {
.corzalltblock{
flex-direction: column;
}
}

ага сработало, переносит, данная функция работает только в современных браузерах?

[Андрей Федоров]

при вертикальной перестройке отменяйте высоту для всех блоков кроме картинки.

[Антон Вебсайтовский]

выходит что так

media only screen and (max-width: 800px) {
.corzalltblock{
flex-direction: column;
}
.corzalltov{
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovi {
width: 100%;
}
.corzalltovn {
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovr {
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovc {
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovx {
width: 100%;
height:none;
}
}

только вот оно не срабатывает. как не странно.

[Антон Вебсайтовский]

посмотрел какие браузера поддерживает flex-direction: column
https://webref.ru/css/flex-direction
я бы не сказал что везде оно работать будет.

[Антон Вебсайтовский]

и еще не пойму как отменить для img, чтобы он ее не растягивал,
.corzalltblock{
list-style: none;
display: flex;
border: 1px solid #FBE4E6;
}

display: flex; чтобы не работал для фото.

.corzblockt img{
width: 100%;
}

обновил наши доработки, codepen.io/anon/pen/xgzKxz

[Антон Вебсайтовский]

ну или ладно пусть флекс для фото тож срабатывает, но как сделать чтобы не было height: 180px;, но все было по центру как щас, по вертикали по центру и чтобы бордер был тож от верха и до низа, я про бордер который идет по правую сторону блока border-right: 1px solid #FBE4E6;

чтобы когда сжимали все сжималось, а то щас фиксировано по height.

[Андрей Федоров]

Антон Вебсайтовский: у меня лично в глазах рябит от ваших .corzalltovx. можно как-нибудь нормально классы называть?

[Антон Вебсайтовский]

Андрей Федоров: да, можно как угодно.

[Антон Вебсайтовский]

мне так и не удалось исправить вторую проблему. c2n.me/3Hamakd

Answer 3

[Виталий]

Прочитайте и вникните в disply: table-cell , и vertical-align: middle

Comments

[Антон Вебсайтовский]

да это понятно дело, центрование по height: 180px;

Answer 4

[RomanSS]

Я бы переверстал, принцип поймете codepen.io/anon/pen/ggKYRa (решение без flex)

Comments

[Антон Вебсайтовский]

ага не плохо, вот только у меня блоки с разным width%

[Антон Вебсайтовский]

а как быть с border: 1px solid #FBE4E6; я вставил но там чет вообще не-то, куда-то за рамки выходит.

[Антон Вебсайтовский]

ну и блоки не переносят при сжатии ока браузера.

[Антон Вебсайтовский]

вот что вышло, бордера фиг пойми как c2n.me/3H9mzLQ