Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто.
Изображение текст
Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности и т.д.
Если пунктов немного (1-3), то можно верстать так:
<div class="list"> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div> <div class="list"> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p> </div>
Стили:
.list {display: flex; align-items: center; margin-bottom: 15px;}
.list img {max-width: 75px; padding-right: 25px;}
@media screen and (max-device-width: 375px) { .list img {align-self: start;} }
Если пунктов побольше, то можно верстать так:
<div class="lists"> <div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div> <div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p> </div> <div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div> <div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p> </div> <div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div> <div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p> </div> </div>
Стили:
.lists > div {display: flex; align-items: center; margin-bottom: 15px;}
.lists > div img {max-width: 75px; padding-right: 25px;}
@media screen and (max-device-width: 375px) { .lists > div {align-self: start;} }
При необходимости корректируем ширину изображения. Но необходимо учитывать максимальную ширину исходника, и наоборот не использовать большие изображения для миниатюры.
Если в тексте должен быть заголовок или несколько абзацев, то добавляем дополнительный div
<div class="list"> <img src="/wp-content/uploads/2016/07/nature-lake.jpg"> <div> <h3>Заголовок текста</h3> <p>Некий текст</p> <p>Учитывающий все современные тенденции. Множество конфигураций страниц для удовлетворения любых потребностей.</p> </div> </div>
