×

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

Разместить рекламу Политика конфидициальности

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


:-)





Поделись мнением!



Имя: Решите капчу: один + два = Правила портала и общения







Можно подняться с самого дна и достичь высоты весьма значительной. Но для этого сколько нужно пройти! Ну, во-первых, огонь… И, во-вторых, естественно, воду.

дед Мазай


Norway
70,8 процентов поверхности Земли – океаны. 29,2 процента - суша.

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




Что делать, чтобы вас ненавидели на работе или в вузе?
Черный юмор. Ирония современного мира в картинках.






×

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