Иногда бывают случаи, когда нужно создать блок, состоящий из картинки и текста. Такие блоки обычно используют для создания ленты новостей или статей. В этой ситуации можно создать блок из таблицы, а можно из блоков на css. В этой статье я расскажу именно про создание блока на css. Во-первых такой блок будет легче подстраивать под мобильный дизайн, во вторых не будет нужды создавать новую таблицу и мучиться с ней.

Примерно такой блок должен будет получиться:



1. Для начала потребуется создать общий блок, в котором будет размещатся текст и изображение. Общему блоку можно присвоить название contmeleft.
2. В блок contmeleft засунем картинку img с шириной 140 пикселей и текст в тегах "P", которые используются для выделения текста в html.


<div class='contmeleft'>
<img width='140px' src='сюда_вставьте_адрес_картинки' >
<p>Здесь будет размещаться ваш текст</p>
</div>


Далее пропишем сам код css, который не только создаст наш блок, но и сделает его красивым.
.contmeleft - стиль для общего блока.
contmeleft img - стить css, который прописываем для картинки.
.contmeleft p - прописываем стиль для текста.

.contmeleft {
border-radius:8px; /* скругляем края блока*/
width: 320px; /* общая ширина блока*/
border: 1px solid #d9d9d9; /* рамка блока*/
overflow: hidden; /* скрывает возможность появления прокрутки блока. */
}

.contmeleft img {
width: 140px; /* ширина картинки 140 */
height: 90px; /* ысота картинки, от неё будет зависеть и размер общего блока */
object-fit: cover; /* обрезаем края картинки, если они не вместятся в блок */
object-position: 0 70; /* тоже обрезка краев */
margin-right: 10px;
float: left; /* важный момент. с помощью этого знаения, мы показывем браузеру, что блок должен соприкасаться со вторым блоком приемущественно с левой стороны */
}


.contmeleft p{
overflow-wrap: normal; /* показывает тексту, что он не должен заходить за границы блока */
word-wrap: normal;
word-break: normal; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */
line-break: auto; /* нет поддержки для русского языка */
-webkit-hyphens: none; -ms-hyphens: none; hyphens: none; /* значение auto не поддерживается Chrome */

padding: 10px; /* отступ от рамки до текста - делает его красивее */
margin-left: 15px; /* отступ с левой стороны от блока с картинкой */
display: block; /* обознначает, что это не просто бесформенный текст, а блок внутри блока */
font-weight:bold; /* толщина текста - толстый */
font-size:14px; /* размер текста*/
margin: 2px 0 0 0; /* отступ от блока с текстом */
}



как видите, создать такой блок довольно не сложно. Опять же обращу внимание на float: left; - именно за счет этого значения (left) зависит с какой стороны будер распологаться ваш текст и картинка.

Чтобы поменять местонахождения текста и картинки. Например, вы хотите, чтоб картинка распологалась справа, а текст слева.
Тогда поменяйте float: left; на right и поменяйте конструкцию html на такую:

<div class='contmeleft'>
<p>Здесь будет размещаться ваш текст</p>
<img width='140px' src='сюда_вставьте_адрес_картинки' > </div>