Как выстроить картинки в линию?

@morda77 · Регистрация: 22.12.2012

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

Привет! Как выстроить эти картинки, что появляются при наведении, в линию?
Дабы было понятно, о чем я, вот короткое видео:
https://www.useloom.com/share/... 565960fb5f

display:inline; вроде не работает. Может, ширина где мала? Не могу найти.

Сайт: http://kirfed-portfolio.hfb790... ery-arrow/

Спасибо.

@kutovoy_10 · 02.02.2019, 20:07

Через флексы сделай.

@morda77 · 02.02.2019, 21:53 **[ТС]**

kutovoy_10, каким образом? Можно подробнее?

@gogolik · 02.02.2019, 22:04

morda77, если вкратце: https://codepen.io/anon/pen/BMRVer

HTML5
1
2
3
4
5
6
7
8
<div class="container">
  <img src="https://via.placeholder.com/150x250">
  <div class="btns">
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
  position: relative;
  width: 150px;
}
.btns {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-flow: column;
}
.btn {
  background: #000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

@morda77 · 03.02.2019, 20:35 **[ТС]**

gogolik, огромное спасибо за трудоемкую помощь. Я очень ценю. Но почему так? У меня, в итоге, вышло, просто, задав ссылкам display: flex; .

@gogolik · 04.02.2019, 02:54

morda77, я художник, я так вижу. Если просто с флекса пошло, то значит просто по 2 в ряд не влезает и они переносятся на новую строку. Возможно.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через 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-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,714

	Как выстроить картинки в линию? 02.02.2019, 17:43. Показов 1246. Ответов 5 Метки css, display (Все метки) Привет! Как выстроить эти картинки, что появляются при наведении, в линию? Дабы было понятно, о чем я, вот короткое видео: https://www.useloom.com/share/... 565960fb5f display:inline; вроде не работает. Может, ширина где мала? Не могу найти. Сайт: http://kirfed-portfolio.hfb790... ery-arrow/ Спасибо. 0

@kutovoy_10 0 / 0 / 0 Регистрация: 07.11.2018 Сообщений: 2
	02.02.2019, 20:07
	Через флексы сделай. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,714
	02.02.2019, 21:53 [ТС]
	kutovoy_10, каким образом? Можно подробнее? 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,714
	03.02.2019, 20:35 [ТС]
	gogolik, огромное спасибо за трудоемкую помощь. Я очень ценю. Но почему так? У меня, в итоге, вышло, просто, задав ссылкам display: flex; . 0

@gogolik Супер-модератор 3965 / 2083 / 832 Регистрация: 13.03.2010 Сообщений: 6,878
	04.02.2019, 02:54
	morda77, я художник, я так вижу. Если просто с флекса пошло, то значит просто по 2 в ряд не влезает и они переносятся на новую строку. Возможно. 0