ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Табличное поведение без таблиц
22 сообщений из 22, страница 1 из 1
Табличное поведение без таблиц
    #38936668
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
Flex идеально подходит, но нужен изящный фоллбек, желательно на чистом CSS, и желательно без JS.

Суть такая, есть некий набор ячеек таблицы:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<div class="grid">
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   ...
</div>



данная структура должна отображаться в виде многострочной таблицы с 3-мя одинаковыми по ширине колонками, упаковывать итемы по 3 штуки в некие class="row" и т.п. нельзя. Как подобное без flex-а сфоллбечить для старья?
...
Рейтинг: 0 / 0
15.04.2015, 07:37
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936683
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
hVostt данная структура должна отображаться в виде многострочной таблицы с 3-мя одинаковыми по ширине колонками, упаковывать итемы по 3 штуки в некие class="row" и т.п. нельзя..item {display:inine-block;width:33%}

hVostt Как подобное без flex-а сфоллбечить для старья?чо?
шо за птичья мова?
...
Рейтинг: 0 / 0
15.04.2015, 08:01
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936734
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
AntonariyhVosttданная структура должна отображаться в виде многострочной таблицы с 3-мя одинаковыми по ширине колонками, упаковывать итемы по 3 штуки в некие class="row" и т.п. нельзя..item {display:inine-block;width:33%}

не вижу как образуются строки, элементы с разной высотой порвут разметку таблицы.


AntonariyhVosttКак подобное без flex-а сфоллбечить для старья?чо?
шо за птичья мова?

нужны определения "flex" и "сфоллбечить"?
...
Рейтинг: 0 / 0
15.04.2015, 09:07
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936749
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
hVosttСуть такая, есть некий набор ячеек таблицы:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<div class="grid">
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   ...
</div>


Эта разметка никоим образом не похожа на "ячейки таблицы"... Максимум на что смахивает - некий список. Не более того.
...
Рейтинг: 0 / 0
15.04.2015, 09:19
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936751
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
hVosttнужны определения "flex" и "сфоллбечить"?
Па русски научись гаварить. (с) Ф.Киркрров
...
Рейтинг: 0 / 0
15.04.2015, 09:20
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936765
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
hVosttне вижу как образуются строки, элементы с разной высотой порвут разметку таблицы.не вижу этого требования в изначальной задаче.

height:100pх;overflow:hidden;


hVosttнужны определения "flex" и "сфоллбечить"? естественно, мало ли какие соки мозга ты надавил в эти богомерзкие неправославные слова.
...
Рейтинг: 0 / 0
15.04.2015, 09:31
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936775
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
Antonariyестественно, мало ли какие соки мозга ты надавил в эти богомерзкие неправославные слова.

спасибо за страшно яркий образ :) можно я вас буду цитировать :))
...
Рейтинг: 0 / 0
15.04.2015, 09:37
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936777
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
krvsaЭта разметка никоим образом не похожа на "ячейки таблицы"... Максимум на что смахивает - некий список. Не более того.

Если для вас проблема сделать из списка таблицу, проходите мимо, задачка явно вам не по зубам. Нужна была бы расовая таблица, использовал бы <table>, чего вы умничаете, не пойму?

krvsaПа русски научись гаварить. (с) Ф.Киркрров

Следующий.


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

height:100pх;overflow:hidden;

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

Antonariyестественно, мало ли какие соки мозга ты надавил в эти богомерзкие неправославные слова.

Прошу прощения за повреждённую психику, какие вы тут нежные оказывается
...
Рейтинг: 0 / 0
15.04.2015, 09:38
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936793
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
Код: html
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.
30.
31.
	<html>
	<head>
	<style>
.item{
	float:left;
	width:50px;
}	
.grid div:nth-child(3n+1) {
color: red;
clear:left;
}

/*ul li:nth-of-type(3) */
	</style>
	</head>
	<body>
<div class="grid">
   <div class="item">test1</div>
   <div class="item">test2</div>
   <div class="item">test3</div>
   <div class="item">test4</div>
   <div class="item">test5</div>
   <div class="item">test6</div>
   <div class="item">test7</div>
   <div class="item">tets8</div>
   <div class="item">test9</div>
   <div class="item">test10</div>
   <div class="item">tets11</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
15.04.2015, 09:53
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936794
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
hVosttчего вы умничаете, не пойму?
Ну это уже не моя проблема...
...
Рейтинг: 0 / 0
15.04.2015, 09:55
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936805
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
kunaksergey,

к сожалению нет, это просто переносы, а надо табличный вид, ячейки могут быть разной высоты, но в пределах каждой строки высота ячеек должна быть одинаковой.
...
Рейтинг: 0 / 0
15.04.2015, 10:04
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936806
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
krvsahVosttчего вы умничаете, не пойму?
Ну это уже не моя проблема...

а похоже, что твоя
...
Рейтинг: 0 / 0
15.04.2015, 10:05
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936905
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
hVostt,

1)
посмотри верстку в grid-systems

2)
посмотри http://960.gs/ (там хорошая документация и нетрудно переделать под себя)
проблема может возникнуть если будешь делать RWD: придется использовать JS

3) погугли css-frameworks
...
Рейтинг: 0 / 0
15.04.2015, 11:42
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936936
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
mini.weblabhVostt,

1)
посмотри верстку в grid-systems

2)
посмотри http://960.gs/ (там хорошая документация и нетрудно переделать под себя)
проблема может возникнуть если будешь делать RWD: придется использовать JS

3) погугли css-frameworks


С сетками я хорошо знаком. Речь о том, что я сделал решение на flex , оно прекрасно строит стопудовую таблицу из списка, с поведением как у таблицы, строки выравниваются по высоте и вообще всё круто и красиво.

Теперь вопрос, как мне сделать подобное поведение рабочим для старых браузеров. Не совсем прям уж таких старых, как IE 6-7, но всё же. Может кто знает?
...
Рейтинг: 0 / 0
15.04.2015, 12:15
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38936947
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
hVostt,

только скриптом.
...
Рейтинг: 0 / 0
15.04.2015, 12:23
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937261
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
AntonariyhVostt,

только скриптом.

есть https://github.com/doctyper/flexie

но...

Flexie enables the 2009 Flexbox model. You're probably looking for the updated spec. There is currently no polyfill for the new spec.*

* I've been working on one in my off-time. It's a beast.
...
Рейтинг: 0 / 0
15.04.2015, 15:07
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937281
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
.

в общем flex рулит не по-детски, но верстальщики любят свои грязные хаки, лишь бы оправдывать свой хлеб
...
Рейтинг: 0 / 0
15.04.2015, 15:19
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937304
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
здесь есть legacy code generator,
http://the-echoplex.net/flexyboxes/
...
Рейтинг: 0 / 0
15.04.2015, 15:31
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937338
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
mini.weblabздесь есть legacy code generator,
http://the-echoplex.net/flexyboxes/

крутая вещь, спасиб за ссыль!
...
Рейтинг: 0 / 0
15.04.2015, 15:48
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937340
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
mini.weblab,

и еще там парень объясняет как симулировать эффект флекс-бокса
но я не знаю насколько это up to date
...
Рейтинг: 0 / 0
15.04.2015, 15:48
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937397
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
http://habrahabr.ru/post/242545/
не плохое описание
...
Рейтинг: 0 / 0
15.04.2015, 16:15
| Ответить | Цитировать | Написать  
Табличное поведение без таблиц
    #38937425
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
вадя http://habrahabr.ru/post/242545/
не плохое описание

ага, хорошее
...
Рейтинг: 0 / 0
15.04.2015, 16:26
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Табличное поведение без таблиц
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38936775&tid=1446086]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 165ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 56ms
get tp. blocked users:
 1ms
others: 234ms
total:  495ms
созд. / загр.: 495ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]