8 или более картинок в одном блоке

@o5Tolik · Регистрация: 10.01.2014

Студворк — интернет-сервис помощи студентам

Друзья, подскажите пожалуйста, как можно разместить на одинаковом расстоянии друг от друга и от края до края 8 или более картинок в одном блоке на DLE?
Или хотябы вот так:

@The_Fat_Man · 03.12.2014, 00:13

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article id="movers-row">
 
            <a href="img/full_image/full_image_19.jpg" data-lightbox="roadtrip">
                <img src="img/612/image_19.jpg" class="post" alt="image_19">
            </a>
        
            <a href="img/full_image/full_image_20.jpg" data-lightbox="roadtrip">
                <img src="img/612/image_20.jpg" class="post" alt="image_20">
            </a>
        
            <a href="img/full_image/full_image_21.jpg" data-lightbox="roadtrip">
                <img src="img/612/image_21.jpg" class="post" alt="image_21">
            </a>
            
            <span></span>
        </article>

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
26
27
28
29
30
31
32
33
34
35
article {
    width: 95%;
    margin: 0 auto;
}
 
article a {
    text-decoration: none;
}
 
article img {
    width: 31.4%;
    margin-bottom: 2.3%;
    border: none; 
}
 
#movers-row { 
    text-align:justify;
}
 
#movers-row span { 
    display:inline-block; 
    width:100%; 
}
 
/*Fade image*/
 
article a img:hover{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
-webkit-transition: all 0.45s ease;
-moz-transition: all 0.45s ease;
-ms-transition: all 0.45s ease;
-o-transition: all 0.45s ease;
transition: all 0.45s ease;
}

@o5Tolik · 03.12.2014, 06:15 **[ТС]**

Во, спасибо. Попробуем

Добавлено через 26 минут
Нет не пойдет, но спасибо за помощь.
Я както раньше делал с помощью <table..., но вот как вспомнить немогу.

@vovandr · 03.12.2014, 07:23

Сообщение от The_Fat_Man

Могу скинуть код для равноудаленного расположения трех картинок в ряду, потом можешь сам код покромсать и разобраться

а если ширина картинок меньше чем 31.4% от родителя?

@o5Tolik · 03.12.2014, 10:58 **[ТС]**

То они вылазиют за пределы, у меня так.

Добавлено через 59 секунд
Ну что с таблицей, кто поможет?

@SF · 03.12.2014, 11:43

o5Tolik,
http://www.cssdesk.com/CrCV4

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    * {margin: 0; padding: 0;}
    div#nav {width: 260px;}
    div#nav ul {list-style-type: none;}
    div#nav ul.box-one {float: left;}
    div#nav ul.box-two {float: right;}
    div#nav li {margin: 5px 10px;}
    div#nav ul li img {width: 90px; height: 30px;}
    
</style>
<div id="nav">
    <ul class="box-one">
        <li><a href="#"><img src="" alt="img" /></a></li>
        <li><a href="#"><img src="" alt="img" /></a></li>
        <li><a href="#"><img src="" alt="img" /></a></li>
        <li><a href="#"><img src="" alt="img" /></a></li>
    </ul>
    <ul class="box-two">
        <li><a href="#"><img src="" alt="img" /></a></li>
        <li><a href="#"><img src="" alt="img" /></a></li>
        <li><a href="#"><img src="" alt="img" /></a></li>
        <li><a href="#"><img src="" alt="img" /></a></li>
    </ul>
</div>

@Fedor92 · 03.12.2014, 17:48

Сообщение от o5Tolik

Ну что с таблицей, кто поможет?

А чего там помогать?

@o5Tolik · 03.12.2014, 22:48 **[ТС]**

Да нет, это тоже не то

Добавлено через 6 минут
Размер блока уже 275 шириной, а длина должна быть резиновой

Добавлено через 4 минуты
Ребята, я это делал раньше с помощью тега <table
Может, кто подскажет

Добавлено через 3 минуты
Просто забыл

@Fedor92 · 03.12.2014, 23:28

Сообщение от o5Tolik

Да нет, это тоже не то

- то есть Вы хотите готовый код заполучить не прикладывая усилий?

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@o5Tolik 0 / 0 / 0 Регистрация: 10.01.2014 Сообщений: 11

	8 или более картинок в одном блоке 02.12.2014, 22:04. Показов 3267. Ответов 8 Метки нет (Все метки) Друзья, подскажите пожалуйста, как можно разместить на одинаковом расстоянии друг от друга и от края до края 8 или более картинок в одном блоке на DLE? Или хотябы вот так: Изображения 0

@o5Tolik 0 / 0 / 0 Регистрация: 10.01.2014 Сообщений: 11
	03.12.2014, 06:15 [ТС]
	Во, спасибо. Попробуем Добавлено через 26 минут Нет не пойдет, но спасибо за помощь. Я както раньше делал с помощью <table..., но вот как вспомнить немогу. 0

@o5Tolik 0 / 0 / 0 Регистрация: 10.01.2014 Сообщений: 11
	03.12.2014, 10:58 [ТС]
	То они вылазиют за пределы, у меня так. Добавлено через 59 секунд Ну что с таблицей, кто поможет? 0

@o5Tolik 0 / 0 / 0 Регистрация: 10.01.2014 Сообщений: 11
	03.12.2014, 22:48 [ТС]
	Да нет, это тоже не то Добавлено через 6 минут Размер блока уже 275 шириной, а длина должна быть резиновой Добавлено через 4 минуты Ребята, я это делал раньше с помощью тега <table Может, кто подскажет Добавлено через 3 минуты Просто забыл 0