Выравнивание table по верхнему краю-CSS

@Шалун · Регистрация: 27.02.2017

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

Подскажите, пожалуйста, как выровнять ТАБЛИЦЫ table по верхнему краю (данные для table берутся из бд), как показано на рисунке?(НОВИЧОК)Как ни пытался: выравнивание идет строго по горизонтали( таблицы в линию), а мне нужно, чтобы выравнивание у каждой таблицы было за таблицей, которая стоит выше

PHP/HTML
1
2
3
4
5
6
7
8
9
<table align="left" cellpadding="0" cellspacing="0" class="materials" >
 <tr >
   <td valign="top"  > 
     <div> <a href="#"><img src="<?= $item['images']?>"  /></a> </div>
     <div class="sdg">
      <div class="title"><a href="#" class="title"><?= $item['title']?> </a></div></div>
    </td>
</tr>
</table>

CSS
1
2
3
4
5
table {
  width: 100px;
  height: 175px;
  background: white;
  }

@Jodah · 21.05.2017, 10:17

Шалун, где вы видите таблицу?

Это блоками надо верстать.

@Шалун · 21.05.2017, 10:21 **[ТС]**

Эти прямоугольники, как показано на рисунке выше, я изобразил ввиде каждой таблицы. Мне т.е. нужно не с table работать, а переделывать в div?

@mrtoxas · 21.05.2017, 11:12

Шалун, да, переделать в div и подключить плагин, например - masonry.

@Шалун · 21.05.2017, 11:16 **[ТС]**

Спасибо большое, то что надо!!

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Jodah 3900 / 3238 / 1353 Регистрация: 01.08.2012 Сообщений: 10,914
	21.05.2017, 10:17
	Шалун, где вы видите таблицу? Это блоками надо верстать. 0

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	21.05.2017, 10:21 [ТС]
	Эти прямоугольники, как показано на рисунке выше, я изобразил ввиде каждой таблицы. Мне т.е. нужно не с table работать, а переделывать в div? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	21.05.2017, 11:12
	Сообщение было отмечено Шалун как решение Решение Шалун, да, переделать в div и подключить плагин, например - masonry. 1

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	21.05.2017, 11:16 [ТС]
	Спасибо большое, то что надо!! 0

Выравнивание table по верхнему краю-CSS

Решение