События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Что такое родина? и как её понимают люди разных поколений?


Самые жестокие люди в истории мира


Самые глубокие места в мире


Самые глубокие места в мире


Удаляем ссылки из текстового файла с помощью Notepad++


Как сегодня выглядит Выборг. Фото выборга


Почему во время фитнеса возникает чувство грусти и сонливость?


фото нло, инопланетян настоящие фотографии, реальные фото


Самая старая канализация в мире - Римский водопровод. (Загуан. Римский Храм воды


Что означают карты Таро? История появления.


[ФОТО] Как менялся пр.Стачек (СПб). метро Автово.



“Русских всегда недооценивали, а между тем они умеют хранить секреты не только от врагов, но и от друзей.”

Уинстон Черчилль

Следующая цитата »

Это факт!


 В газопылевом облаке Стрелец B2, находящемся в центре нашей Галактики, с помощью спектрального анализа астрономы обнаружили этиловый спирт.

Следующий факт »

Ра оставил тебе послание!... (0о0)

как сделать картинку рядом текстом, в одном блоке. html, css


html, css, текст рядом с картинкой, как сделать, как создать, текст, картинка, лента, список статей, для новых статей, список, статьи, список, новостная лента, блок, общий блок, див, div, два блока в одном, 2 блока в 1, 2 в 1, картина рядом с текстом, блок с текстом и картинкой, написать, блок с картиной и текстом, программирование, пример, урок, код, скрипт, сбоку, рядом, около,

Иногда бывают случаи, когда нужно создать блок, состоящий из картинки и текста. Такие блоки обычно используют для создания ленты новостей или статей. В этой ситуации можно создать блок из таблицы, а можно из блоков на 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>







ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)