Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блок по ширине контента / 14 сообщений из 14, страница 1 из 1
08.04.2010, 08:38:44
    #36567401
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
Возможно ли блок сделать по ширине контента? Примерно так, как это делает Опера через "float:left" и "display:inline-block".
Нужно для того, чтобы разместить блок по центру.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 09:13:08
    #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:32:28
    #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:33:17
    #36567491
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
А вот правильный вариант, тот же самый код, но уже в Опере.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 09:39:04
    #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:57:36
    #36567577
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
С таблицей тоже не то. Там нужно добавить float:left к дивам и опять получаем тот же самый вариант.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 09:59:09
    #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, 10:06:47
    #36567606
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
st_st , тогда не понятно что у тебя таки определяет ширину "основного блока"? Ранее ты писал что ширина контента... Теперь явно не контента!
Так чтоже всетаки?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 10:07:04
    #36567608
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
Остальные браузеры расширяют родительский див на весь экран, вместо того, чтобы прижимать его к контенту, даже если указаны "float:left" или "display:inline-block".
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 10:08:13
    #36567612
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
Ширина контента = ширине блока.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 10:13:17
    #36567625
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
Во втором случае получается ширина блока = ширине экрана.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 10:15:24
    #36567633
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
st_st , таки пора определяться. Ширина контента или экрана?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 10:19:25
    #36567644
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
st_stТам нужно добавить float:left к дивам
ДИВы с флоат_лефт не могут расширять родительские элементы по определению. Т.ч. если закладываться на ширину "контента" - получиш вертикальную "кишку", не более.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2010, 10:52:12
    #36567757
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок по ширине контента
krvsa
ДИВы с флоат_лефт не могут расширять родительские элементы по определению.


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

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

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

Остальные браузеры берут и растягивают блок на весь экран, создавая огромный padding и затем сами же начинают считать этот паддинг контентом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блок по ширине контента / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 299ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1453258]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 19ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 2ms
others: 190ms
total:  299ms
x
x
Закрыть


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