ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV. Почему так?
24 сообщений из 24, страница 1 из 1
DIV. Почему так?
    #38374061
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<!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="height: 100px; border: 1px solid red;">
		<div id="div1" style="height: 100%; width: 200px; float:left; border: 1px solid green;"></div>
		<div id="div2" style="height: 100%; border: 1px solid red; background: blue;">TEXT</div>
	</div>
</body>
</html>



Почему div2 налазит на div1?
float: left; у обоих DIV-ов решает эту проблему, но тогда div2 теряет способность авторастягивание во всю ширину и её нужно указывать в пикселах принудительно, а это не подходит.
...
Рейтинг: 0 / 0
22.08.2013, 07:05
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374064
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
Почему "TEXT 2" разместился под div2, а не под div1 слева?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<!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="height: 100px; border: 1px solid red; width:100%;">
		<div id="div1" style="height: 100%; width: 200px; float:left; border: 1px solid green;"></div>
		<div id="div2" style="height: 100%; width0: 100%; border: 1px solid red; background: blue;">TEXT</div>
	</div>
	
	TEXT 2
</body>
</html>
...
Рейтинг: 0 / 0
22.08.2013, 07:30
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374080
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
DIVsПочему div2 налазит на div1?
Они ведут себя согласно спецификации...

DIVsfloat: left; у обоих DIV-ов решает эту проблему, но тогда div2 теряет способность авторастягивание во всю ширину и её нужно указывать в пикселах принудительно, а это не подходит.
Ты просто не умеешь их готовить...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#box {
	height: 100px; 
	border: 1px solid red;
}
#div1 {
	float:left; 
	height: 100%; 
	width: 200px; 
	border: 1px solid green;
}
#div2 {
	height: 100%; 
	margin-left: 200px;
	border: 1px solid red; 
	background-color: blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='box'>
	<div id="div1"></div>
	<div id="div2">TEXT</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
22.08.2013, 08:26
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374081
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
DIVsПочему "TEXT 2" разместился под div2, а не под div1 слева?
Тут просто встречный вопрос.
- А почему он должен расположиться под div1 слева? Просто по твоему такому хотению?
...
Рейтинг: 0 / 0
22.08.2013, 08:28
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374083
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
DIVsПочему "TEXT 2" разместился под div2, а не под div1 слева?
Теперь понятно почему?

Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#box {
	height: 100px; 
	border: 1px solid red;
}
#div1 {
	float:left; 
	height: 100%; 
	width: 200px; 
	/*border: 1px solid green;*/
}
#div2 {
	height: 100%; 
	margin-left: 200px;
	border: 1px solid red; 
	background-color: blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='box'>
	<div id="div1"></div>
	<div id="div2">TEXT</div>
</div>
<span>text</span>
</body>
</html>
...
Рейтинг: 0 / 0
22.08.2013, 08:32
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374097
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
krvsaТы просто не умеешь их готовить...
ты не ответил на вопрос. хитрость ХИТРОСТЬ В MARGIN - это не ответ на вопрос ПОЧЕМУ.

krvsaDIVsПочему "TEXT 2" разместился под div2, а не под div1 слева?
Тут просто встречный вопрос.
- А почему он должен расположиться под div1 слева? Просто по твоему такому хотению?
с**а тролль мерзкий. Нет! Оно должно быть у тебя на лбу гвоздём выцарапанное, му**к!

krvsaТеперь понятно почему?
Нет! Не понятно! с какого хуисжавы моржового пиксельная рамка даёт такой нелогичный эффект?
...
Рейтинг: 0 / 0
22.08.2013, 08:46
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374098
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сколько боли...
...
Рейтинг: 0 / 0
22.08.2013, 08:50
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374103
Pascal66
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Pascal66
Гость
А можно я всех тут тоже на куй пошлю?
...
Рейтинг: 0 / 0
22.08.2013, 08:58
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374113
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
Pascal66А можно я всех тут тоже на куй пошлю?
Не можно, а нужно!
...
Рейтинг: 0 / 0
22.08.2013, 09:09
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374116
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
Pascal66А можно я всех тут тоже на куй пошлю?
Вы же видите какие тут птицы гордые? Их если пнуть, они не только не полетят, они еще и расскажут какой ты класс не закончил
...
Рейтинг: 0 / 0
22.08.2013, 09:11
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374127
Pascal66
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Pascal66
Гость
DIVsPascal66А можно я всех тут тоже на куй пошлю?
Вы же видите какие тут птицы гордые? Их если пнуть, они не только не полетят, они еще и расскажут какой ты класс не закончил
Люди пытаются показать превосходство виртуально, не имея превосходства реального. Это нормально.
А вот чего вы заводитесь мне не понятно. Попахивает патологией иного характера. Или же стёбом, но каким-то не смешным.
...
Рейтинг: 0 / 0
22.08.2013, 09:26
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374132
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
Pascal66, просто устал от скрульных стерв ;)

Решения вышеперечисленных вопросов я и сам накодить могу. Меня интересуют ответы почему так происходит, я хочу разобраться.
Сами посмотрите на язвительные и провокационные сообщения крвса.
...
Рейтинг: 0 / 0
22.08.2013, 09:32
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374826
S_A_V_e
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
S_A_V_e
Участник
Думаю налазит т.к. координаты начала у обоих дивов одинаковые - от начала родителя. Попробуйте такой вариант:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>

<style type="text/css">
*
{
margin: 0;
outline:none;

}
html,
body
{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div style="height: 100px; border: 1px solid red; overflow:hidden; ">

<div id="div1" style="height: 98px; width: 200px; float:left; border: 1px solid green; background: azure;">div1</div>
<div id="div2" style="height: 98px; border: 1px solid yellow; position:absolute; left:203px; right:0px; float:right; background: blue; ">div2</div>
</div>
text
</body>
</html>


Это то что должно получиться ? Тут нет жесткой привязки ширины div2 в пикселях и при этом он растягивается на всю ширину.
Думаю текст смещается т.к. не очищается поток после float блоков (для очистки overflow:hidden в родительском div).
...
Рейтинг: 0 / 0
22.08.2013, 15:26
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38374981
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
DIVsэто не ответ на вопрос ПОЧЕМУ
...
Не понятно! с какого хуисжавы моржового пиксельная рамка даёт такой нелогичный эффект?
DIVsМеня интересуют ответы почему так происходит, я хочу разобраться.
Тут все ответы



С примерами и пояснениями... Начинайте уже читать книжки.
...
Рейтинг: 0 / 0
22.08.2013, 16:44
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375353
Pascal66
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Pascal66
Гость
krvsaТут все ответы. Начинайте уже читать книжки.
Может тогда и форум заменить на число "42"?
...
Рейтинг: 0 / 0
23.08.2013, 01:47
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375357
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
S_A_V_e, спасибо Вам за вежливость!

S_A_V_eДумаю налазит т.к. координаты начала у обоих дивов одинаковые - от начала родителя.
Да, действительно! Но разве DIV2 не должен обтекать DIV1 корректно??

S_A_V_eЭто то что должно получиться ? Тут нет жесткой привязки ширины div2 в пикселях и при этом он растягивается на всю ширину.
Думаю текст смещается т.к. не очищается поток после float блоков (для очистки overflow:hidden в родительском div).
Да, верно! Спасибо!
style="clear: left;" - более правильно, отменяет действие float и текст в данном случае размещается правильно.
...
Рейтинг: 0 / 0
23.08.2013, 02:10
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375359
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
http://jsfiddle.net/n4KbS/
Почему тогда текст в DIV2 размещается вне DIV1, не понятно. Бред какой-то...
...
Рейтинг: 0 / 0
23.08.2013, 02:15
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375361
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
Кроме этого текст смещается не из-за наличия рамки, а потому что другие рамки выступают и слева получается как бы свободное место и текст его обтекает.

По ссылке ниже показан пример где текст располагается правильно и без clear и подобных отмен действия float.
http://jsfiddle.net/n4KbS/1/
...
Рейтинг: 0 / 0
23.08.2013, 03:05
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375395
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Pascal66Может тогда и форум заменить на число "42"?
У тебя есть такие полномочия?

Книжку, я так понял, читать не собираешся...
...
Рейтинг: 0 / 0
23.08.2013, 08:31
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375622
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
DIVs, вот Вам пример, иллюстрирующий, что такое обтекание:
Код: 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.
<!DOCTYPE HTML>
<html>
<head>
  <style>
    div {
      background-color: gray;
      color: white;
      float: left;
      height: 128px;
      line-height: 128px;
      margin: 4px 4px 0 4px;
      text-align: center;
      width: 120px;
    }
    
    p {
      width: 400px;
    }
  </style>
</head>
<body>
  <div>Я картинко</div>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </p>
  <p>
    Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </p>
</body>
</html>
...
Рейтинг: 0 / 0
23.08.2013, 11:47
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375626
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Добавим рамку для наглядности:
Код: css
1.
2.
3.
4.
p {
  border: 1px solid black;
  width: 400px;
}
...
Рейтинг: 0 / 0
23.08.2013, 11:49
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375632
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
DIVs, надеюсь теперь понятно, почему у Вас div2 налазит на div1?

P.S.: и завязывайте хамить. Смешно и глупо выглядит.
...
Рейтинг: 0 / 0
23.08.2013, 11:52
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375634
DIVs
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIVs
Гость
skyANA, уважаемый, шли бы вы со своими очевидностями.
я уже выше описал, почему текст располагался не там где должен был.
...
Рейтинг: 0 / 0
23.08.2013, 11:52
| Ответить | Цитировать | Написать  
DIV. Почему так?
    #38375643
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
DIVsskyANA, уважаемый, шли бы вы со своими очевидностями.
я уже выше описал, почему текст располагался не там где должен был.Парадоксальная фраза.
...
Рейтинг: 0 / 0
23.08.2013, 11:56
| Ответить | Цитировать | Написать  
24 сообщений из 24, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV. Почему так?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38374132&tid=1447972]:
 0ms
get settings:
 8ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 164ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 61ms
get tp. blocked users:
 1ms
others: 247ms
total:  516ms
созд. / загр.: 516ms
x
x
Закрыть


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