Выравнивание

@Avgust · Регистрация: 03.11.2014

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

Всем привет) не могу нормально выровнять картинки в блоке( сейчас покажу код и объясню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
    </head> 
    <body>
<div id="main_pole">
<div id="middle">
<div id="left_hero">
                    <a href="#" >
                        <img src="images//es1.png" width="85px" height="60px" class="for_all" />
                        <img src="images//es2.png" width="85px" height="60px" class="for_all" />
                        <img src="images//es3.png" width="85px" height="60px" class="for_all" />
                        
                    </a>
                    
</div>
</div>
</div>

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
#main_pole {
    width: 1100px;
    margin: 0 auto;
    background: #1A1717;
}
#middle {
    width: 100%;
    padding: 0 0 70px;
    height: 1%;
    position: relative;
    margin-top: 40px;
}
#middle:after {
    content: '';
    clear: both;
    display: table;
}
#left_hero {
    width: 260px;
    height: 500px;
    float: left;
    margin-left: 20px;
    padding: 0 250px 0 10px;
    background-color: #141313;
}
img.for_all {
    margin: 10px 3px 0 3px;
    float: left;
}

В общем я думал, что картинки будут распологаться в блоке в 1 ряд, пока не дойдут до конца блока ( по ширине ), а потом перейдут на след. строку.
Кидаю скрин как у меня. Помогите, как поднять картинку во втором ряду ?)

@xDanbo · 15.10.2015, 14:55

Уберите width: 260px; в #left_hero

@Fedor92 · 15.10.2015, 15:05

Avgust, давайте посчитаем... Ширина родительского блока - 260px... Ширина одной картинки - 85px... Трёх - 255px... Отступы между картинками + левый padding родительского блока... А теперь вопрос: как все картинки должны уместится в первом ряду, если он получается больше родительского блока?

Пересчитывайте либо ширину родительского блока - либо ширину картинок с учётом отступов между ними...

@Avgust · 15.10.2015, 15:14 **[ТС]**

Но просто там ведь еще куча места до конца ряда( там все, что черное - это вроде этот блок и еще далеко до конца ряда

Добавлено через 1 минуту
padding: 0 250px 0 10px;
вот это убрал и все получилось) всем спасибо))

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@xDanbo 15 / 15 / 7 Регистрация: 12.04.2014 Сообщений: 101
	15.10.2015, 14:55
	Уберите width: 260px; в #left_hero 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2015, 15:05
	Avgust, давайте посчитаем... Ширина родительского блока - 260px... Ширина одной картинки - 85px... Трёх - 255px... Отступы между картинками + левый padding родительского блока... А теперь вопрос: как все картинки должны уместится в первом ряду, если он получается больше родительского блока? Пересчитывайте либо ширину родительского блока - либо ширину картинок с учётом отступов между ними... 1

@Avgust 3 / 3 / 3 Регистрация: 03.11.2014 Сообщений: 80
	15.10.2015, 15:14 [ТС]
	Но просто там ведь еще куча места до конца ряда( там все, что черное - это вроде этот блок и еще далеко до конца ряда Добавлено через 1 минуту padding: 0 250px 0 10px; вот это убрал и все получилось) всем спасибо)) 0