Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.01.2021, 13:10   #1
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию Таблица в два столбца

Здравствуйте. У меня есть таблица, как её отформатировать в 2 столбца. Так чтобы под картинкой был соответствующий текст, а блоки выравнивались большему блоку в строке.

Я сделал с помощью inline-block и position:absolute. Но текст пришлось поднять наверх картинки. И высота всех блоков фиксирована относительно самого большого во всей таблице.

Может как-то можно сделать с помощью grid или flex?

https://jsfiddle.net/ew60mkcs/

Код HTML:
<table>
	<tbody>
		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x650"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>

		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x420"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>

		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x650"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>

		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x650"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>

		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x650"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>

		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x450"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>

		<tr><td><div><a href="#"><img src="https://via.placeholder.com/450x420"></a></div></td></tr>
		<tr><td>Text в одну строчку</td></tr>
		<tr><td><br></td></tr>
	</tbody>
</table>
Код:

table {

  width: 767px;

}

tbody,
table {
	display: block;
	border-spacing: 0px;
}

table tbody > tr {
	display: block;
	padding: 25px 25px 5px;
}

img {
	width: 300px;
	padding: 0;
}

/*1, 4*/
/* Блок картинки */
table tbody > tr:nth-child(6n+1),
table tbody > tr:nth-child(6n+4) {
	display: inline-block;
	width: 302px;
	min-height: 440px;
}

/*2, 5*/
/* Подпись снимка */
table tbody > tr:nth-child(6n+2),
table tbody > tr:nth-child(6n+5) {
	position: absolute;
	width: 200px;
	left: 60px;
	margin-top: -490px;
}
table tbody > tr:nth-child(6n+5) {
	left: 400px;
}

/*3, 6*/
table tbody > tr:nth-child(6n+3),
table tbody > tr:nth-child(6n) {
	display: none;
}
Без имени-1.jpg

Последний раз редактировалось Parallelogram; 28.01.2021 в 13:15.
Parallelogram вне форума Ответить с цитированием
Старый 26.02.2021, 07:37   #2
laiho123
Заблокирован
 
Регистрация: 10.02.2021
Сообщений: 20
По умолчанию

Верстку нужно делать, не на тэгах table, а на тэгах div.
laiho123 вне форума Ответить с цитированием
Старый 26.02.2021, 12:57   #3
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

Цитата:
Сообщение от laiho123 Посмотреть сообщение
Верстку нужно делать, не на тэгах table, а на тэгах div.
О да, спасибо за ответ. Мне очень помогло.
Во первых, если присвоить тегам display:block, то всё равно на чём делать.
Во вторых, у меня нет доступа к странице напрямую, есть только доступ к стилям.
Parallelogram вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
два столбца в одном блоке Shm0N HTML и CSS 2 08.11.2014 15:01
Как открыжить два столбца в excele? TORISS Microsoft Office Excel 12 16.08.2013 09:14
разделение столбца на два apelsun SQL, базы данных 4 20.05.2012 21:32
два один.столбца, простые числа.. majesticx777 Паскаль, Turbo Pascal, PascalABC.NET 1 15.06.2011 13:38
Помогите пожалуйста сравнить два столбца ddimma Microsoft Office Excel 4 16.01.2009 09:01