Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Табличное поведение без таблиц / 22 сообщений из 22, страница 1 из 1
15.04.2015, 07:37
    #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, 08:01
    #38936683
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
hVostt данная структура должна отображаться в виде многострочной таблицы с 3-мя одинаковыми по ширине колонками, упаковывать итемы по 3 штуки в некие class="row" и т.п. нельзя..item {display:inine-block;width:33%}

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

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


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

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

height:100pх;overflow:hidden;


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

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

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

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

Следующий.


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

height:100pх;overflow:hidden;

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

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

Прошу прощения за повреждённую психику, какие вы тут нежные оказывается
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 09:53
    #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:55
    #38936794
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
hVosttчего вы умничаете, не пойму?
Ну это уже не моя проблема...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 10:04
    #38936805
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
kunaksergey,

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

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

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

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

3) погугли css-frameworks
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 12:15
    #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:23
    #38936947
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
hVostt,

только скриптом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 15:07
    #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:19
    #38937281
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
.

в общем flex рулит не по-детски, но верстальщики любят свои грязные хаки, лишь бы оправдывать свой хлеб
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 15:31
    #38937304
mini.weblab
mini.weblab
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
здесь есть legacy code generator,
http://the-echoplex.net/flexyboxes/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 15:48
    #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, 16:15
    #38937397
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
http://habrahabr.ru/post/242545/
не плохое описание
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.04.2015, 16:26
    #38937425
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Табличное поведение без таблиц
вадя http://habrahabr.ru/post/242545/
не плохое описание

ага, хорошее
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Табличное поведение без таблиц / 22 сообщений из 22, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 373ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446086]:
 0ms
get settings:
 7ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 51ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 54ms
get tp. blocked users:
 1ms
others: 236ms
total:  373ms
x
x
Закрыть


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