×

Вокруг мира тунистурцияПетербург и окрестностиСтрашное и мистическоеТайны историипро сссрКрымВыборгфакты и мирОбщество, мирПоследние новости
Интересно Анекдотыуроки по html,css,js,phpМистика и ГаданияМузыка
Исскуство и поэзия БасниПритчиСтихи Серебренного векаМифы и Легенды древнего мираСтихи Золотого векаЯпонские стихи и проза
Разные эпохи про сссрСредневековьеДревняя АзияСказки народов мираТайны истории
Разное Страшное и мистическоеРаскраскиКонвертерыКомедия "Дино и его друзья"Оригами
общество и мир Последние новостиОбщество, мирфакты и мирАфоризмы и цитатыПсихология

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

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


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

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

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

как сделать картинку рядом текстом, в одном блоке. html, 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>






Комментарии

  • i cantt unders

    Ответить
  • Спс

    Ответить
  • Комментарии к посту








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

    [ Интересные факты о мире ]






    Не сохраняются абзацы и новые строки PHP MySQL
    как найти и заменить слово в столбце mysql?
    Крым Тайны истории Страшное и мистическое про ссср турция Петербург и окрестности Выборг факты и мир Общество, мир Последние новости тунис






    ×

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