Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/335: Рейтинг темы: голосов - 335, средняя оценка - 4.86
0 / 0 / 0
Регистрация: 03.04.2013
Сообщений: 25

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

09.09.2013, 11:22. Показов 63488. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
хотел бы узнать как сделать 4 картинки по горизонтале а 2 по вертикале короче в 2 ряда
****
****
вот так
подскажите просто пожалуйста
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
09.09.2013, 11:22
Ответы с готовыми решениями:

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

Растягивание картинки по вертикали/горизонтали
Имеется код: <html> <head> <style type="text/css"> html { height:100%; }

Как выставить слой по центру не только по горизонтали но и по вертикали?
использую метод margin:auto в сочетании с relative - только он дает правильную реакцию при уменьшении окна браузера. но! у меня позиция...

11
11 / 11 / 3
Регистрация: 09.03.2010
Сообщений: 70
09.09.2013, 18:17
Цитата Сообщение от OoHikeoO Посмотреть сообщение
хотел бы узнать как сделать 4 картинки по горизонтале а 2 по вертикале короче в 2 ряда
****
****
вот так
подскажите просто пожалуйста
)))))))
Не удержался.
ну самый простой способ это сделать
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
 <td><img src="img1.jpg"/></td>
 <td><img src="img2.jpg"/></td>
 <td><img src="img3.jpg"/></td>
 <td><img src="img4.jpg"/></td>
</tr>
<tr>
 <td><img src="img5.jpg"/></td>
 <td><img src="img6.jpg"/></td>
 <td><img src="img7.jpg"/></td>
 <td><img src="img8.jpg"/></td>
</tr>
</table>
img должны лежать в папке с файлом html и хорошо бы им всем прописать свойство мax-height и max-width через стили например так
CSS
1
2
3
4
5
img{
 мax-height:150px;
 max-width:150px;
 border:0px; /* Это для IE */
}
1
Coding is art
Эксперт JS
540 / 423 / 154
Регистрация: 04.09.2013
Сообщений: 1,066
09.09.2013, 19:06
а ещё можно:
HTML5
1
2
3
4
5
6
7
8
9
10
11
<ul class="grid">
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
 
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
    <li><img src="https://www.cyberforum.ru/html5/html5/html5/..." alt="" /></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
ul.grid {
list-style:none;
margin:0;
padding:0;
}
ul.grid:after{
content:'';
display:block;
width:100%;
height:0px;
clear:both;
}
ul.grid li {
display: block;
float:left;
width:25%; /* можем поменять на 20 и сделать margin:0 2.5%;.. суть думаю понятна */
height: 150px;
overflow:hidden;
}
ul.grid li img {
display:block;
max-width:100%;
height: auto; /* или 150px */
margin:0 auto;
}
1
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
09.09.2013, 21:38
Цитата Сообщение от int Посмотреть сообщение
ну самый простой способ это сделать
И что в нем такого простого? целый десяток лишних тегов.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div>
 <img src="img1.jpg"/>
 <img src="img2.jpg"/>
 <img src="img3.jpg"/>
 <img src="img4.jpg"/>
</div>
<div>
 <img src="img1.jpg"/>
 <img src="img2.jpg"/>
 <img src="img3.jpg"/>
 <img src="img4.jpg"/>
</div>
1
11 / 11 / 3
Регистрация: 09.03.2010
Сообщений: 70
10.09.2013, 09:21
Цитата Сообщение от newJS Посмотреть сообщение
И что в нем такого простого? целый десяток лишних тегов.
Именно простой, а не короткий! Разницу не чувствуешь?
Давай покажу
Простой пример
C++
1
2
3
4
5
6
7
if(..){
 
}else if(..){
 
}else{
 
}(
Это понятно всем.
А вот такое уже долго будешь разбирать)
C++
1
i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
Да он короче, но разве проще?)
1
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
10.09.2013, 16:53
А можно так:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="gallery">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
  <img src="https://www.cyberforum.ru/html5/...">
</div>
CSS
1
2
3
4
5
6
7
.gallery {
  width: 100%;
}
.gallery IMG {
  margin-right:1.9%;
  width: 22.9%;
}
И будет вам чудо!
1
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
10.09.2013, 21:33
Цитата Сообщение от int Посмотреть сообщение
Разницу не чувствуешь?
Нет, не чую, ты даже не знаешь что не нужно было каждую картинку в отдельную ячейку ложить, не говоря уже о том что народ старается избегать таблиц где они совсем не нужны.
А пример на другом языке подтверждает плохое знание тобой html.

Цитата Сообщение от int Посмотреть сообщение
Да он короче, но разве проще?)
Для тех кто понимает, и короче и все понятно.
0
11 / 11 / 3
Регистрация: 09.03.2010
Сообщений: 70
11.09.2013, 08:52
этот пример подходит и для js без корого html редко обходится, но я Вас услышал)))
Для школьников надо ввести ряд ограничений при регистрации)))
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
11.09.2013, 10:09
Цитата Сообщение от int Посмотреть сообщение
Для школьников надо ввести ряд ограничений при регистрации)))
Сначала нужно научится признавать свои ошибки, и только потом бросаться такими детскими фразами.
1
11 / 11 / 3
Регистрация: 09.03.2010
Сообщений: 70
11.09.2013, 10:35
Цитата Сообщение от newJS Посмотреть сообщение
Сначала нужно научится признавать свои ошибки, и только потом бросаться такими детскими фразами.
Посмотрите на ошибки, которые Вы допускаете при письме)) Явно 3- по русскому. Да и манера разговаривать, тыкать пальцами и утверждать бездоказательно сразу выдала отсутствие образования.

А я вот ошибки признаю и исправляю , а также благодарен тем кто поправил и объяснил! Здесь согласиться в том, что предложенный Вами способ самый простой ну никак не могу, и уверен что не только я.
1
0 / 0 / 0
Регистрация: 03.04.2013
Сообщений: 25
23.09.2013, 01:44  [ТС]
всем спасибо тема закрыта
0
 Аватар для DesignBR
10 / 10 / 1
Регистрация: 30.06.2013
Сообщений: 87
23.09.2013, 06:12
Оффтоп:
ребят, нет смысла находить лучшего кодера, у всех решение проблем происходит теми способами, как им удобно! Пойдемте гуманитарий троллить...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.09.2013, 06:12
Помогаю со студенческими работами здесь

Как расположить 3 блока с иконками по горизонтали
Коллеги, подскажите пожалуйста, как разместить 3 блока по горизонтали с иконками. Ширина всего блока - 540px. Левый блок, ширина макс -...

Текст в блоке по вертикали и горизонтали
Уже битый час сижу гуглю, но так и не смог найти ничего путного.. Нужно просто отцентровать текст внутри блока по вертикали и горизонтали....

Выравнивание текста по вертикали и горизонтали
Пример кода: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link...

Текст в центре li по вертикали и горизонтали
Что то я не могу сообразить, как это реализовать. в общем нужно текст в &lt;li&gt; расположить по центру области. Собственно вот миниатюра,...

Выравнивание блоков по вертикали и горизонтали
Здравствуйте! Встретился с такой проблемой. Есть блок родитель. Внутри этого блока есть один блок с текстом, а другой блок с чем угодно, но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru