Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновый по ширине блок с центровкой контента / 7 сообщений из 7, страница 1 из 1
05.01.2013, 14:23
    #38100522
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
Как-то пару лет назад хотел сделать одну задачу по резиновой вёрстке, да потом забросил. Вобщем имеется блок (div) со стандартной шириной 100%. Внутри этого блока происходит заполнение другими блоками слева направо с известной шириной и высотой (у всех она одинакова). Можно ли выровнять блоки по центру относительно родительского блока с заполнением (прижатием) именно слева направо? Если родителю поставить text-align:center, то одинокий в строке блок вылезет в центр, а должен быть слева. На рисунке синим цветом для наглядности дополнительный блок (inline-block), который обжимает контент.
И вторая задача из этой же серии - отступы между блоками, иначе margin-right последнего в строке нарушает центровку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.01.2013, 20:29
    #38100717
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
проблему не решу, но хоть помогу проиллюстрировать ;)
http://jsfiddle.net/Q4hUw/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2013, 13:01
    #38100916
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
Паганельпроблему не решу, но хоть помогу проиллюстрировать ;)
http://jsfiddle.net/Q4hUw/

Спасибо за иллюстрацию :) Самое что интересное, пару лет назад в Опере 9 всё прекрасно работало, а вот в остальных - нет. Если блок переносится, то он почему-то автоматом растягивает родителя, который в свою очередь float:left или inline-block и должен обжимать контент (думается мне это глюк w3c или кто там это всё придумал). Пока как временный вариант text-align:center добавить главному родителю, inline-block убрать и пусть болтаются невлезшие в строку ниже по центру. Думал может хоть в современном css есть чё-нить наподобии - "выбрать последний элемент в строке", а дальше :after и br. Насчёт второго вопроса помню даже создавал здесь тему по поводу webkitа, который непонимал что от него хотят, позже потестим.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2013, 13:02
    #38100917
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
Забыл прикрепить, Опера 9 -
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2013, 21:37
    #38101182
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
вот максимум до чего я смог додуматься
http://jsfiddle.net/Q4hUw/8/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.01.2013, 08:40
    #38101347
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
Паганельвот максимум до чего я смог додуматься
http://jsfiddle.net/Q4hUw/8/

Второй вопрос об отступах между элементами решился через letter-spacing (webkit тоже в теме). А вот word-spacing он так и неподдерживает для inline-block элементов, хотя теперь это уже не важно, когда есть letter-spacing.

А по первому вопросу, посидел так посмотрел, вроде и по центру тоже неплохо выглядит (когда единственный родитель с text-align:center). Хотелось бы конечно как задумывалось изначально, но я тоже пока не вижу решений.

Куда-нить на stackoverflow закинуть или на наш какой форум, даже и не знаю где верстальщики то сидят.

p.s. резина - это увлекательно :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.01.2013, 13:27
    #38107465
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновый по ширине блок с центровкой контента
Решено. Если в одну строку, то по центру не выравнивается, но это и не нужно (количество блоков всегда будет на несколько строк). Главная идея - накидывание пустых блоков в конец, взята отсюда по совету автора .

Код: 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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
<!DOCTYPE html> 
<html> 
<head>
	<title></title> 
	<style> 
		.wrapper {
			text-align:center;
			/*text-align:justify;*/
			line-height:0;
			min-width:238px;
			padding:20px 18px 0;
			border:2px solid blue;	
			letter-spacing:14px;
		}
		.item {
			width:200px;
			height:285px;
			text-align:left;
			margin-bottom:20px;
			vertical-align:top;
			line-height:normal;
			display:inline-block;
			border:1px solid red;
		}
		.stub { 
			height:0;
			margin:0;
			padding:0;
			border:none;
			width:202px;
			vertical-align:top;
			display:inline-block;
		}
	</style> 
</head> 
<body> 
	<div class="wrapper">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
		<div class="stub"></div>
	</div>
</body> 
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновый по ширине блок с центровкой контента / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 517ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448868]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 196ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 1ms
others: 239ms
total:  517ms
x
x
Закрыть


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