Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV. Почему так? / 24 сообщений из 24, страница 1 из 1
22.08.2013, 07:05
    #38374061
DIVs
DIVs
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
Код: 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:30
    #38374064
DIVs
DIVs
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
Почему "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, 08:26
    #38374080
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
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:28
    #38374081
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
DIVsПочему "TEXT 2" разместился под div2, а не под div1 слева?
Тут просто встречный вопрос.
- А почему он должен расположиться под div1 слева? Просто по твоему такому хотению?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 08:32
    #38374083
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
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:46
    #38374097
DIVs
DIVs
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
krvsaТы просто не умеешь их готовить...
ты не ответил на вопрос. хитрость ХИТРОСТЬ В MARGIN - это не ответ на вопрос ПОЧЕМУ.

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

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

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

 

<!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, 16:44
    #38374981
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
DIVsэто не ответ на вопрос ПОЧЕМУ
...
Не понятно! с какого хуисжавы моржового пиксельная рамка даёт такой нелогичный эффект?
DIVsМеня интересуют ответы почему так происходит, я хочу разобраться.
Тут все ответы



С примерами и пояснениями... Начинайте уже читать книжки.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.08.2013, 01:47
    #38375353
Pascal66
Pascal66
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
krvsaТут все ответы. Начинайте уже читать книжки.
Может тогда и форум заменить на число "42"?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.08.2013, 02:10
    #38375357
DIVs
DIVs
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
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:15
    #38375359
DIVs
DIVs
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
http://jsfiddle.net/n4KbS/
Почему тогда текст в DIV2 размещается вне DIV1, не понятно. Бред какой-то...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.08.2013, 03:05
    #38375361
DIVs
DIVs
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
Кроме этого текст смещается не из-за наличия рамки, а потому что другие рамки выступают и слева получается как бы свободное место и текст его обтекает.

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

Книжку, я так понял, читать не собираешся...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.08.2013, 11:47
    #38375622
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
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:49
    #38375626
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
Добавим рамку для наглядности:
Код: css
1.
2.
3.
4.
p {
  border: 1px solid black;
  width: 400px;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.08.2013, 11:52
    #38375632
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV. Почему так?
DIVs, надеюсь теперь понятно, почему у Вас div2 налазит на div1?

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


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