ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блок по ширине контента
14 сообщений из 14, страница 1 из 1
Блок по ширине контента
    #36567401
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Возможно ли блок сделать по ширине контента? Примерно так, как это делает Опера через "float:left" и "display:inline-block".
Нужно для того, чтобы разместить блок по центру.
...
Рейтинг: 0 / 0
08.04.2010, 08:38:44
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567453
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
st_st , для начала...

Код: plaintext
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.
<html>
<head>
<style>
#box {
	width: 300px;
	border: 1px solid;
	text-align: center;
}
#cont {
	margin-left: auto;
	margin-right: auto;
}
</style>
<script>
</script>
</head>
<body>
<div id='box'>
	<table id='cont' border='1'>
	<tr>
		<td>Тест</td>
	</tr>
	</table>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
08.04.2010, 09:13:08
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567488
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Напишу подробней.
Есть общий резиновый блок, внутри него в цикле заполняются блоки известной одинаковой ширины, если блок не влазит, то он автоматом переносится на вторую строку. Проблема в том, что я не знаю как родительский блок подогнать по ширине относительно дочерних, браузеры (кроме Оперы) расширяют родительский блок по ширине экрана, даже если у него "float:left" или "display:inline-block".

Прикреплю картинку, как не должно быть.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title></head>
<body>

<div style="float:left;border:2px solid blue">

<div style="float:left;border:1px solid red;width:800px"> 1 </div>

<div style="float:left;border:1px solid red;width:800px"> 2 </div>

</div>

</body>
</html>
...
Рейтинг: 0 / 0
08.04.2010, 09:32:28
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567491
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
А вот правильный вариант, тот же самый код, но уже в Опере.
...
Рейтинг: 0 / 0
08.04.2010, 09:33:17
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567516
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
st_st , как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<html>
<head>
<style>
.box {
	width: 200px;
	border: 1px solid red;
}
</style>
<script>
</script>
</head>
<body>
<table border='1'>
<tr>
	<td>
		<div class='box'> 1 .
		</div>
		<div class='box'> 2 .
		</div>
	</td>
</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
08.04.2010, 09:39:04
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567577
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
С таблицей тоже не то. Там нужно добавить float:left к дивам и опять получаем тот же самый вариант.
...
Рейтинг: 0 / 0
08.04.2010, 09:57:36
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567581
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Код: plaintext
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>

<style>
.a {
	float:left;
	border:2px solid blue;
}
.a div {
	float:left;
	border:1px solid red;
	width:300px;
	margin:5px;
}
</style>

</head>
<body>

<div class="a">

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>

</div>

</body>
</html>
И рисунок Оперы в идеале:
...
Рейтинг: 0 / 0
08.04.2010, 09:59:09
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567606
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
st_st , тогда не понятно что у тебя таки определяет ширину "основного блока"? Ранее ты писал что ширина контента... Теперь явно не контента!
Так чтоже всетаки?
...
Рейтинг: 0 / 0
08.04.2010, 10:06:47
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567608
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Остальные браузеры расширяют родительский див на весь экран, вместо того, чтобы прижимать его к контенту, даже если указаны "float:left" или "display:inline-block".
...
Рейтинг: 0 / 0
08.04.2010, 10:07:04
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567612
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Ширина контента = ширине блока.
...
Рейтинг: 0 / 0
08.04.2010, 10:08:13
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567625
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Во втором случае получается ширина блока = ширине экрана.
...
Рейтинг: 0 / 0
08.04.2010, 10:13:17
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567633
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
st_st , таки пора определяться. Ширина контента или экрана?
...
Рейтинг: 0 / 0
08.04.2010, 10:15:24
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567644
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
st_stТам нужно добавить float:left к дивам
ДИВы с флоат_лефт не могут расширять родительские элементы по определению. Т.ч. если закладываться на ширину "контента" - получиш вертикальную "кишку", не более.
...
Рейтинг: 0 / 0
08.04.2010, 10:19:25
| Ответить | Цитировать | Написать  
Блок по ширине контента
    #36567757
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
krvsa
ДИВы с флоат_лефт не могут расширять родительские элементы по определению.


А если родительский элемент тоже float:left? Прям как в этом примере или он сам по себе расширяется, видимо вздумалось ему расшириться от скуки :)

Код: plaintext
1.
Ширина контента или экрана?

Нужно сделать блок по ширине контента, как в данном случае делает это Опера. Контент представляет из себя дивы (inline-block или float:left - неважно).

Остальные браузеры берут и растягивают блок на весь экран, создавая огромный padding и затем сами же начинают считать этот паддинг контентом.
...
Рейтинг: 0 / 0
08.04.2010, 10:52:12
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блок по ширине контента
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36567581&tid=1453258]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 200ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 65ms
get tp. blocked users:
 1ms
others: 200ms
total:  507ms
созд. / загр.: 507ms
x
x
Закрыть


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