Расположить картинки в ряд в html – Как расположить картинки в одну строку с сохранением пропорций и одинаковой высотой?

Как разместить несколько картинок рядом по горизонтали?

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.

Решение

Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов <img> автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.

Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).

Пример 1. Картинки по горизонтали

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотографии</title>
 </head>
 <body>
  <p>
    <img src="images/thumb1.jpg" alt="Фотография 1">
    <img src="images/thumb2.jpg" alt="Фотография 2">
    <img src="images/thumb3.jpg" alt="Фотография 3">
    <img src="images/thumb4.jpg" alt="Фотография 4">
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.

Рис. 1. Фотографии, расположенные по горизонтали

Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега <img> в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги <img> в примере в одну строку.

Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom. В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.

Пример 2. Отступы у фотографий

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотографии</title>
  <style>
   .thumb img  {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 15px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head>
 <body>
  <p>
   <img src="images/thumb1.jpg" alt="Фотография 1">
   <img src="images/thumb2.jpg" alt="Фотография 2">
   <img src="images/thumb3.jpg" alt="Фотография 3">
   <img src="images/thumb4.jpg" alt="Фотография 4">
  </p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Вид фотографий, оформленных с помощью стилей

Блоки и изображения в ряд. float, display

Для того, чтобы разместить элементы в ряд есть несколько способов. 1. float:left Во-первых float:left - он указывает на то, что элемент с таким css - свойством остальные элементы должны обтекать справа, а сам этот элемент будет прижиматься к левому краю. Внимание: элемент с таким свойством будет считать строчным. И может быть размещён посредине строки. Пример:

1

2

3

4

5

6

7

8

9

<html>

<head>

</head>

<body>

    текст<div>Первый блок</div>текст

    <div style="float:left">Второй блок</div>

    <div>Третий блок</div>текст

</body>

</html>

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

Первый блок

текст

Второй блок

текст

Третий блок

текст Иногда высота этих элементов определяется неправильно. Этого поможет избежать родительский элемент со свойством overflow:hidden;

1

2

3

4

5

<div style="overflow:hidden">

    текст<div style="border:1px solid #eee;">Первый блок</div>

    <div style="border:1px solid #eee;float:left;">Второй блок</div>

    <div style="border:1px solid #eee;">Третий блок</div>текст

</

div>

В целом можно заметить, что верстка с помощью float:left неаккуратна. 2. display:inline-block Ещё один способ разместить элементы в ряд - display:inline-block. Несколько блоков подряд с таким свойством будут размещены в одну линию. Также в линию с блоками добавляется и текст: asd

Первый блок

asd

Второй блок

asd

Третий блок

asd

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

<head>

    <meta charset="UTF-8">

    <style>

    div.block{

        display:inline-block;

        padding:25px;

        

margin:15px;

    }

    div.block:hover{

        margin:5px;

        padding:35px;

    }

    </style>

</head>

<body>

    asd<div class="block" style="background:#faa">Первый блок</div>asd

    <div class="block" style="background:#ffa">Второй блок</div>asd

    <div class="block" style="background:#aff">Третий блок</div>asd

</body>

</html>

Примечание: нет разницы какие блоки нужно выравнивать в линию. Таким способом одинаково выравниваются, и div-блоки, и img, span, textarea и д.р. Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне [email protected]

Как вставить две картинки рядом по горизонтали html код

Категория: html Автор: lelic Опубликовано: 10-10-2012

Метки: html

 

Сегодня столкнулся с проблемой размещения картинок.

Такая проблема надо разместить две картинки рядом по горизонтали.

способ первый самый легкий: Заключить эти картинки в таблицу.

<table>
<tr>
<td><a href="https://ваша_ссылка "_blank"><img title="Описание" src="ссылка картинки" alt=""width="150"/></a> </td>

<td><a href="https://ваша_ссылка "_blank"><img title="Описание" src="ссылка картинки" alt=""width="150"/></a></td>
</tr>
</table>

пример использования

Второй сложнее. С помощью <div> этот способ использую я

<div align="center">

<div>
<a href="https://ваша_ссылка "_blank"><img title="Описание" src="ссылка картинки" alt=""width="150"/></a>
</div>
<div>
<a href="https://ваша_ссылка "_blank"><img title="Описание" src="ссылка картинки" alt=""width="150"/></a>
</div>

Третий способ с использование CSS стиля. (мне кажется лишнее если вы раз прописываете картинку писать для нее стиль)

Пояснения:

float:left - обтекание с левой стороны

float:right - обтекание с правой стороны

_blank - открывает страницу в новом окне

alt="" - описание картинки пустым оставлять не желательно

width="150" ширина высота

Загрузка...

Как разместить рядом несколько картинок?


Иногда бывает очень надо)), чтобы картинки в посте были размещены в один ряд.

Можно сделать коллаж, конечно. Я почему-то не очень люблю коллажи, особенно их делать)) видимо наелась ими в свое время.

Можно сделать с помощью выравнивания, но это ТАК криво работает в блоггере, что проще вообще не делать)

Расскажу, как вставляю картинки в пост я.

Сразу скажу, есть и другие способы. Но я привыкла именно к такому способу, потому что этот блог - не первый мой веб-проект, до этого я сама делала сайт, а точнее интернет-магазин детских вещей, делала его на платформе wordpress и перелопатив много инфо по вставке картинок, остановилась на этом способе.

Заранее ответив на ваш вопрос, напишу, что интернет-магазин я давно продала (у меня была 1/2 часть). Сейчас я с грустью захожу на его сайт и вижу, что сайт совсем не ведется и не обновляется. Дизайн переделан...точнее изуродовано то, что создавалось с таким трудом. Но это уже не мое дело, что очень хорошо)

И теперь, если мне нужно вставить много картинок подряд в одну строчку, или картинки и текст рядом, и чтобы все было ровненько и красиво,  я использую таблицу с прозрачными границами.

Сложно, скажете вы? Зато работает и вы не зависите от глюков визуального редактора. А раз прописав код таблицы, вы можете его просто копировать из поста в пост.

Начнем?

Например, нам нужно разместить в один ряд три картинки:


1. Для этого создадим сообщение и написав текст, остановимся в нужном нам месте и переключимся в режим HTML.

2. В режиме HTML вставляем код таблицы.

<table>
<tbody>
<tr>
<td>столбец 1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>
</table>

По коду видно, что теги 
<tr></tr> - означают начало и конец строки, а
<td></td> - начало и конец столбца.



Чтобы менять количество строк и столбцов, надо просто менять количество этих тегов и их содержимое (то, что будет внутри ;-))

Важно: теги  столбцов помещены внутри тегов строк, видите?

3. Возвращаемся в режим Создать.

Все страшные коды исчезли, остались только три слова в один ряд:

столбец1 столбец2 столбец3

4. Вставим первую картинку. Для поставим курсор перед словом "столбец 1" и обычным способом нажмем на вставку картинки. Получится вот так:
столбец 1 столбец2 столбец3

5. Вставляем вторую картинку, для этого ставим курсор перед словом "стоблец2" и жмем на вставку картинки.

столбец 1 столбец2 столбец3

3. Тоже самое делаем и с третьей картинкой.
столбец 1 столбец2 столбец3

Слова "стоблбец 1", "столбец 2" и "столбец 3" можно удалить, выделив и нажав на Delete, а можно и заменить их на описание картинок.

Они также будут выравниваться в рамках столбцов таблицы.

Ляляля

Ляляляля

Ляляля


Смотрим на результат, задаем нужный размер картинок, можем сделать их ссылками ( здесь написано, как это сделать).

Вот такой способ. Пишите свои))

Блоки картинок с подписями, выровненные по центру

Задача.

Переработать предыдущее решение для возможности использования выравнивания по центру.

Использование значения inline-block для свойства display существенно упрощает код, но надо учитывать, что это значение поддерживается только современными версиями браузеров.

Как это выглядит в браузере

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
91 
92 
93 
94 
<style type="text/css">
.thumbnails
{
/* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
margin: -3em 0 0 -2em;

/* Выравнивание по центру */
text-align: center;
}

.thumbnail
{
/* Убираем подчеркивание у элемента ins,
который был использован для совместимости со старыми версиями Internet Explorer */
text-decoration: none;

/* Следующее правило для Firefox 2 */
display: -moz-inline-box;

/* а это для остальных */
display: inline-block;

vertical-align: top;

/* Убираем выравнивание по центру */
text-align: left;

/* Отступы между блоками */
margin: 3em 0 0 2em;
}

.thumbnail .r
{
/* Если есть необходимость, то свойства padding, border, background и position со значением relative
лучше задавать у этого элемента -- это несколько расширит количество поддерживаемых версий браузеров */

/* Задаем минимальную ширину по тексту */
width: 14em;

/* Минимальная ширина в пикселях будет автоматически рассчитываться по ширине картинки */
float: left;
}
</style>
<div>
    <ins>
        <div>
            <a href="/everything/izdal/kovodstvo2/"><img src="/everything/izdal/kovodstvo2/izdal-kovodstvo2-anon.jpg" alt="Ководство. Второе издание" /></a><br />
            Второе издание &laquo;<a href="/everything/izdal/kovodstvo2/">Ководства</a>&raquo;
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/optosystems/"><img src="/everything/optosystems/optosystems-anon.jpg" alt="Оптосистемы" /></a><br />
            <a href="/everything/optosystems/">Офтальмологическая установка</a> компании &laquo;Оптосистемы&raquo;
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/folderix/"><img src="/everything/folderix/folderix-anon.jpg" alt="Фолдерикс" /></a><br />
            Флеш-накопитель &laquo;<a href="/everything/folderix/">Фолдерикс</a>&raquo;
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/izdal/karta-ptolemeya/"><img src="/everything/izdal/karta-ptolemeya/izdal-karta-ptolemeya-anon.jpg" alt="Карта Птолемея" /></a><br />
            Книга &laquo;<a href="/everything/izdal/karta-ptolemeya/">Карта Птолемея</a>&raquo; Герца Франка
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/ancor/site2/"><img src="/everything/ancor/site2/ancor-anon.jpg" alt="Анкор 2.0" /></a><br />
            <a href="/everything/ancor/site2/">Cайт &laquo;Анкора&raquo;&nbsp;2.0</a>
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/rigroup/"><img src="/everything/rigroup/rigroup-anon.jpg" alt="Ригрупп" /></a><br />
            Сайт риелторской компании &laquo;<a href="/everything/rigroup/">Ригрупп</a>&raquo;
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/eksmo/panov-dragon-day/"><img src="/everything/eksmo/panov-dragon-day/panov-dragon-day-anon.jpg" alt="День дракона" /></a><br />
            Книга Вадима Панова &laquo;<a href="/everything/eksmo/panov-dragon-day/">День дракона</a>&raquo;
        </div>
    </ins>
    <ins>
        <div>
            <a href="/everything/grain-holding/identity/"><img src="/everything/grain-holding/identity/grain-anon.jpg" alt="Грейн Холдинг" /></a><br />
            Фирменный стиль и&nbsp;буклет &laquo;<a href="/everything/grain-holding/identity/">Грейн&nbsp;Холдинга</a>&raquo;
        </div>
    </ins>
</div>


Как вставить три картинки по горизонтали и сделать содержание блога

Давно назрела необходимость добавить верхний пост и содержание, предполагала, что это будет занятием довольно нудным и откладывала. Но, как говориться, главное начать. Если кому-то интересно - делюсь как чайник с чайником, это очень просто,  но зато сэкономит время в будущем. Может есть и другие способы, и даже более простые, но я опишу свой. Также я выбирала место для содержания между сайдбаром и прикрепленной записью, но решила пока сделать вверху.

"Дизайн" созрел давно - такие же горизонтальные картинки, как и в подборке записей в конце поста, чтобы все сочеталось. Ссылки лучше сделать и с картинок, и с подписей, чтобы был живой текст. Хотя можно было подписать картинки, к примеру. Картинки сделала в фотошопе, вначале взяла размер 200х100, но оказались маловаты - увеличила до 230х115 пикселей. Насколько я знаю, это можно сделать в приложении Paint  (ниже к этому вернусь).  Размер картинок можно редактировать прямо в визуальном редакторе, главное, чтобы они были одинаковыми по масштабу. Следующий шаг - расположить три картинки в ряд по горизотали.


По умолчанию, когда вы пишете новый пост открыта вкладка "визуальный редактор", нужно переключиться на вторую, которая называется "html". Вставьте этот код:

<table>

<tbody>

<tr>

<td>столбец 1</td>

<td>столбец2</td>

<td>столбец3</td>

</tr>

</tbody>

</table>

Если вы переключитесь назад в визуальный режим, то увидите на месте кода такую запись:

столбец1 столбец2 столбец3 - у вас получилась невидимая таблица из 3 столбцов.

Теперь прямо в визуальном режиме перед словом "столбец" ставьте курсор и вставляйте изображение с компьютера, как обычно (все три по очереди). Теперь поставьте еще раз перед словами "столбец" курсор и отбейте ентером слово на вторую строчку, а вместо этого слова напишите то, что вам нужно (и так три раза). Ширину картинки можно также менять обычным способом - дважды щелкнуть по ней и изменить значение ширины в открывшемся окне, высота по вертикали выровняется автоматически по умолчанию.

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

Теперь нужно привязать содержание к соответствующим постам с метками - нужно выделить картинку и ее подпись, нажать на кнопку для добавления гиперссылки (в виде скрепки на верхней горизонтальной полоске окна визуального редактора), в открывшемся окне вставить урл такого вида:

название блога/tag/название метки

в моем случае, например, - world-jewellery.livejournal.com/tag/символика

или еще проще - перейти на страницу управления метками

http://www.livejournal.com/account/settings/tags/

и там сделать, что нужно - к примеру, если нажать нужную метку - откроется  как раз страница с нужным урлом - можно скопировать еге и вставить куда нужно

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

PS-1 - если вы уж совсем не дружите с фотошопом, насколько я знаю, картинку можно отредактировать в стандартом приложении Microsoft - Paint. Буквально выбрать картинку на компьютере, навести на нее мышь, нажать ее правую кнопку и выбрать "изменить". Картинка откроется в программе и можно внести изменения в размер, наверное, в ней же можно и обрезать как нужно, я просто никогда не пробовала.

PS-2 - если вам нужно вставить в какое-то место поста html-код - поставьте курсор в то место на странице в визуальном редакторе, где должно появиться то, что нужно - а затем переключитесь в режим html, курсор уже будет стоять на нужном месте (чтобы не путаться в коде.


О дизайне блога и платном аккаунте еще я размышляла здесь

Как вставить 3 картинки в ряд?

Для опытных пользователей фото редакторов или для любителей Instagram вставить несколько картинок в ряд совсем не сложно, как впрочем и для опытных блогеров. Что же делать тем, кто только делает первые шаги по ведению блога. Большинство предложенных решений сложны и непонятны. Впрочем, я сама еще вчера не умела этого делать. 

Раньше я бы сделала коллаж на компьютере и вставила его целиком. Сейчас сплелись три проблемы в один узел: мой бук не позволяет работать с папками, не открывается Пикаса на буке и бесплатное место в веб-альбомах Пикаса подходит к концу..плюс супер скоростной инет с флешки. Пришлось искать решение в на доступном языке и методом проб и ошибок превращать его в пошаговую инструкцию.

 Итог Вы уже видели: три фото моей любимой мамули в ряд. Интересно? Читаем.

Я уверена, что это не единственный способ разместить в ряд несколько изображений, и если я найду другой, то обязательно поделюсь с Вами. А сейчас разберемся с тем, что имеем.

Допустим, что Вы уже написали часть сообщения и именно в данном месте нужно разместить картинки в ряд. Замираем на минутку и, ничего не трогая, ищем в том ряду, где Вы выбираете шрифт, цвет, вставляете изображения, кнопочку, которую раньше не замечали или просто боялись и игнорировали - HTML. 

Нашли? Не пугайтесь, дальше сложно не будет. Смело жмём на эти 4 заветные буковки и получаем вместо написанного нами понятного текста набор закорючек с местами знакомыми буквами. Теперь в конце тех загогулин , то есть в том месте, где Вы хотите разместить фото, вставляем код 

<table>

<tbody>

<tr>

<td>столбец 1</td>

<td>столбец2</td>

<td>столбец3</td>

</tr>

</tbody>

</table>

Больше ничего не трогая в тех дебрях, жмём левее той кнопочки СОЗДАТЬ и попадаем в привычное сообщение, в котором после текста появились 

столбец1 столбец2 столбец3

Дальше уже все просто: ставим курсор перед СТОЛБЕЦ1 и вставляем в обычном режиме изображение (да-да, как обычно Вы это делаете). 


получаем это:

Далее аналогично ставим курсор перед СТОЛБЕЦ2 и вставляем вторую картинку.

Отправить ответ

avatar
  Подписаться  
Уведомление о