AlexZaw

На днях была точно такая же тема:

Попробуйте адаптировать ваш код для мобильных устройств с разным расширением. С учетом того что количество текста напротив "строк" с картинками может быть разным (количество строк тоже, кстати, может меняться). Желательно еще что бы, промежуточные от основных разрешения, тоже выглядели бы прилично и не рассыпались как попало. Если получиться сделать это с легкостью - все нормально. Если же возникнут трудности, то так делать не стоит :) Я конечно придираюсь, и задаю сложные задачи для начинающего, но, в будущем, все это вам придется учитывать.

Примерно так можно: <div class="wrap"> <ul> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> </ul> </div> .wrap { border: 1px solid #000; max-width: 800px; margin: 0 auto; } ul { display: flex; flex-direction: column; list-style: none; padding: 0; } li { display: flex; align-items: center; } li * { width: 33.33%; } li:nth-child(odd) { direction: rtl; text-align: right; } img { border-radius: 50%; vertical-align: middle; }

Не согласен с вами. Почему же эти сетки используют везде, а не только в "частных" случаях? Да и никто не запрещает использовать другие сетки, или вообще свою. К тому-же, гриды, по сути, как вы сами и сказали, это та же сетка, только более гибкая. ИМХО глупо использовать ее там где можно обойтись "костылями" на флоатах и флексах :) Да, и почему вы считаете сетки отличные от гридов костылями? Таблицы тоже в костыли записать из-за того что все это можно гридами решить? Нет, я согласен, гриды это хорошо, и даже замечательно, но не станете же вы их использовать для выравнивания элемента по центру если для этого можно использовать те-же флексы, например? Хотя в верстке ведь не существует однозначно правильных или неправильных решений :) margin-top/margin-bottom -не? Так же как и у гридов. Вот тут согласен, хотя у флексов, насколько я помню, есть всего один недостаток перед гридами - это невозможность расположить один элемент в нескольких "рядах" зы.с гридами просто мало дела имел, возможно у них есть и другие преимущества перед флексами

JS я рекомендовал только при использовании приведенного мной css кода. В случае использования любой сетки, например того-же бутстрапа, ваша проблема будет решена и никакого js и гридов не понадобится.

Потому, что, на мой взгляд, проще и быстрее использовать любую сетку (тем более что наверняка она где то еще используется на сайте) чем используя для этих целей грид расписывать поведение еще одной сетки. С гридами удобно менять порядок и расположение блоков вне зависимости от их порядка в разметке, для остального есть старые добрые флоаты и менее старые, но тоже добрые флексы :)

А я и не говорил, что гриды ТОЛЬКО для каркаса, я, говорил - "в основном". Да и глупо использовать грид для выравнивания карточек товара и т.п., не находите? P.S. Вот это опечатка меня чуть не убила :)

Тут у вас происходит схлопывание margin-ов. Почитайте тут особенно про отмену схлопывания.

Сделайте плюсик отдельным блоком или с помощью псевдоэлемента и залейте фон градиентом

HTML код самому додумывать?

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

Да я не против, просто гриды, в основном, предназначены для построения скелета сайта, а не для выравнивания отдельных элементов :)

Зачем? Используйте обычный div, и внутри него уже расположите кнопку

div.products-list a:last-child{ margin-right: auto; margin-left: 5%; } Плюс можно js подключить, если количество элементов меняется. И никаких гридов :)

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

Если вы сделаете активным другой пункт меню, то будет тоже самое, так что это не Home виноват :) Это пустое место, как и "большой паддинг" образуется из-за дефолтных отступов между инлайновыми элементами. Задайте для .main-menu размер шрифта ноль, а для .main-menu li установите нужный размер шрифта. Сразу же пропадут лишние отступы

Способов избавиться от лишнего расстояния между строчно-блочными элементами несколько. Самый простой это задать для родителя этих элементов font-size:0 затем уже указать нужный размер шрифта для самих строчно-блочных элементов.

Делаете проверку - если отмечен инпут межгород, то считать по такой-то формуле, иначе считать по другой.

Маленько подкорректированный вариант Switch74: <table border=1> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td> <table> <tr> <td>item1</td> <td>item2</td> </tr> </table> </td> <td>item2</td> </tr> </table> table{ border-spacing:0; } table,tr { border:1px solid transparent; } td{ padding: 0; } tr:first-child{ border-bottom: 1px solid #f00; }

Вы бы хоть указали в каком редакторе вы пытаетесь установить emmet. Вот тогда, тот кто пользуется таким-же редактором, вам может подсказать где эта консоль. А вообще, может быть, что это просто проблемы с доступом к серверу где находится плагин и все заработает через какое то время :)

Пардон, не обратил внимания на имя автора ответа :) Вас тоже с наступающим!

Добавить ее. Ну или воспользоваться псевдоэлементом :before или :after

document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"A";

Что значит "почти получилось"? Вам было предоставлено рабочее решение, что не так? Если есть какие-то дополнительные условия - озвучьте их.

Как то так можно: <div class="wrap"> <div class="left"><span>Размещение рекламы</span></div> <div class="right"><span>1300 руб</span></div> </div> body{ margin: 0; } .wrap{ display: flex; justify-content: center; background: url(http://placekitten.com/1920/100) no-repeat center; height: 100px; } .left{ display: flex; align-items: center; flex-grow: 1; text-align: right; } .left span{ width: 100%; background: rgba(0,0,0,.5); padding: 10px 20px ; color: #fff; } .right{ display: flex; flex-grow: 1; margin-left: -10px; } .right span{ align-self: center; background: #0cc; padding: 10px; border-radius: 10px; }