ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновый по ширине блок с центровкой контента
7 сообщений из 7, страница 1 из 1
Резиновый по ширине блок с центровкой контента
    #38100522
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Как-то пару лет назад хотел сделать одну задачу по резиновой вёрстке, да потом забросил. Вобщем имеется блок (div) со стандартной шириной 100%. Внутри этого блока происходит заполнение другими блоками слева направо с известной шириной и высотой (у всех она одинакова). Можно ли выровнять блоки по центру относительно родительского блока с заполнением (прижатием) именно слева направо? Если родителю поставить text-align:center, то одинокий в строке блок вылезет в центр, а должен быть слева. На рисунке синим цветом для наглядности дополнительный блок (inline-block), который обжимает контент.
И вторая задача из этой же серии - отступы между блоками, иначе margin-right последнего в строке нарушает центровку.
...
Рейтинг: 0 / 0
05.01.2013, 14:23
| Ответить | Цитировать | Написать  
Резиновый по ширине блок с центровкой контента
    #38100717
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
проблему не решу, но хоть помогу проиллюстрировать ;)
http://jsfiddle.net/Q4hUw/
...
Рейтинг: 0 / 0
05.01.2013, 20:29
| Ответить | Цитировать | Написать  
Резиновый по ширине блок с центровкой контента
    #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:01
| Ответить | Цитировать | Написать  
Резиновый по ширине блок с центровкой контента
    #38100917
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Забыл прикрепить, Опера 9 -
...
Рейтинг: 0 / 0
06.01.2013, 13:02
| Ответить | Цитировать | Написать  
Резиновый по ширине блок с центровкой контента
    #38101182
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
вот максимум до чего я смог додуматься
http://jsfiddle.net/Q4hUw/8/
...
Рейтинг: 0 / 0
06.01.2013, 21:37
| Ответить | Цитировать | Написать  
Резиновый по ширине блок с центровкой контента
    #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
07.01.2013, 08:40
| Ответить | Цитировать | Написать  
Резиновый по ширине блок с центровкой контента
    #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
12.01.2013, 13:27
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновый по ширине блок с центровкой контента
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38101182&tid=1448868]:
 0ms
get settings:
 8ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 151ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 59ms
get tp. blocked users:
 2ms
others: 259ms
total:  513ms
созд. / загр.: 513ms
x
x
Закрыть


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