Как сделать вывод в виде таблицы но только средствами цсс

@serauto79 · Регистрация: 02.04.2015

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

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

HTML5
1
2
3
4
5
6
7
8
9
<div class="blok1">
<table style='text-align: left;' border='1'><tbody><tr><td colspan='2' rowspan='1'>
Название
</td></tr><tr><td style='height: 35px; width: 35px;'>
<img style='width: 35px; height: 35px;' src='img/kartinka.png'/ >
</td><td style='text-align: left;'>
99
</td></tr></tbody></table>
</div>

как мне сделать тоже самое только на одном СSS
чтобы в хтмл был код что-то вроде

HTML5
1
2
3
4
5
<div class="blok1">
<div class="nazvanie">Название</div>
<div class="foto"></div>
<div class="chifra">99</div>
</div>

помогите с СSS чтобы также сделать но не используя position: absolute;
только relative, в css border='1' не нужно это я для наглядности сделал.

Скрин для примера как сейчас у меня в хтмл отображает

@AlexZaw · 30.11.2017, 20:50

CSS
1
2
3
.foto, .chifra{
  display: inline-block;
}

Размеры сами зададите

@serauto79 · 30.11.2017, 23:16 **[ТС]**

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

.foto, .chifra{
* display: inline-block;
}

То, что вы предлагаете, это вообще не то что мне нужно, вот ваше решение - https://htmlacademy.ru/courses/44/run/18
если вы подумали что мне такое подойдет.

Мне нужен вариант реализации на цсс для этих дивов

HTML5
1
2
3
4
5
<div class="blok1">
<div class="nazvanie">Название</div>
<div class="foto"><img style='width: 35px; height: 35px;' src='img/kartinka.png'/ ></div>
<div class="chifra">99</div>
</div>

Чтобы выглядело в браузере как на скрине, что я приложил, а то что вы предлагаете

CSS
1
display: inline-block;

будет отображаться так

Название
фото
99

а мне нужно так

Название
фото 99

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

Название
фото
99

Мог их смещать, например только Название
а фото 99 осталось недвижимым и собственно каждый элемент из трех, но смещать их мог на странице не
используя position: absolute; так я могу сделать но это не то что мне нужно, а нужно чтобы смещение начиналось от местоположения блока <div class="blok1"> на странице

накиньте пример.

@AlexZaw · 30.11.2017, 23:38

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

будет отображаться так
Название
фото
99

Если вы плохо знаете верстку, то может вы сначала будете пробовать, а потом что то утверждать?

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

а мне нужно так
Название
фото 99

именно так оно и выглядит

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

мог их смещать, например только Название
а фото 99 осталось недвижимым и собственно каждый элемент из трех, но смещать их мог на странице не
используя position: absolute;

Да двигайте как угодно, маржины никто не отменял.

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

накиньте пример.

Пример чего? Это основы блочной верстки. Такой пример подойдет?

HTML5
1
2
3
4
5
<div class="blok1">
<div class="nazvanie">Название</div>
<div class="foto"><img src="http://lorempixel.com/50/50" alt=""></div>
<div class="chifra">99</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.foto, .chifra{
  display: inline-block;
  border: 1px solid red;
  width: 50px;height: 50px;
  vertical-align: top;
  text-align: center;
}
.chifra:after{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

@serauto79 · 30.11.2017, 23:46 **[ТС]**

Все сам все решил!
сразу не мог допереть как сдвигать внутри блока пришлось перечитать мануал

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.blok1 {
position: absolute; 
top: 240px; /* отступ от верхнего края браузера */
left: 100px; /* отступ от левого края браузера */
}
 
.nazvanie {
position: relative; 
top: 4px; /* отступ от верхнего края blok1 */
left: 1px; /* отступ от левого края blok1 */
}
 
.chifra {
position: relative; 
bottom: 27px; /* отступ от верхнего края blok1 */
left: 40px; /* отступ от левого края blok1 */
}

HTML5
1
2
3
4
5
<div class="blok1">
<div class="nazvanie">Название</div>
<div class="foto"><img style='width: 35px; height: 35px;' src='img/kartinka.png'/ ></div>
<div class="chifra">99</div>
</div>

AlexZaw приведите полный пример вашего решения, очень охота глянуть что будет!

CSS
1
2
3
.foto, .chifra{
* display: inline-block;
}

Думаю, мое решение более рационально, ведь можно более удобно позиционировать каждый блок внутри <div class="blok1">
Спасибо за внимание!

@AlexZaw · 01.12.2017, 00:00

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

HTML5
1
2
3
4
5
<div class="blok1">
<div class="nazvanie">Название</div>
<div class="foto"><img src="http://lorempixel.com/35/35" alt=""></div>
<div class="chifra">99</div>
</div>

CSS
1
2
3
4
.foto, .chifra{
  display: inline-block;
  vertical-align: middle;
}

кстати, как быть с этим?

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

но смещать их мог на странице не
используя position: absolute;

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
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-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .