3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
1

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)

04.12.2013, 08:21. Показов 3759. Ответов 19
Метки нет (Все метки)

3-й час бьюсь, но никак не могу понять, что не так делаю.
почему оранжевый блок опускается?

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)


HTML5
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
<!DOCTYPE html>
<html>
      <head>
            <link href="index.css" rel="stylesheet" type="text/css">
      </head>
      
      <body>
            <div id="wrapper">
                 <div id="header"></div>
                 <div class="clear"></div>
                 <div id="content1"></div>
                 <div class="clear"></div>
                 <div id="content2"></div>
                 <div class="clear"></div>
                 <div id="content3"></div>
                 <div class="clear"></div>
                 <div id="content4"></div>
                 <div class="clear"></div>
                 <div id="content5"></div>
                 <div id="content6"></div>
                 <div id="content7"></div>
                 <div class="clear"></div>
                 <div id="footer"></div>
            </div>       
      </body>
</html>
CSS
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
#wrapper {
margin: 0;
padding: 0;
width: 900px;
height: 900px;
background-color: #C0C0C0;
}
 
 
#header {
margin: 0;
padding: 0;
width: 400px;
height: 50px;
background-color: #FFFF80;
float: left;
}
 
 
#content1 {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
background-color: #808040;
float: right;
}
 
 
#content2 {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
background-color: #FF80FF;
float: left;
}
 
 
#content3 {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
background-color: #FFE1E1;
float: right;
}
 
 
#content4 {
margin: 0;
padding: 0;
width: 400px;
height: 100px;
background-color: #DDDDFF;
float: left;
}
 
 
#content5 {
margin: 0;
padding: 0;
width: 200px;
height: 100px;
background-color: #FF00FF;
float: left;
}
 
 
 
#content7 {
margin: 0;
padding: 0;
width: 200px;
height: 100px;
background-color: #FF8040;
float: right;
}
 
 
#content6 {
margin: 0;
padding: 0;
width: 300px;
height: 100px;
background-color: #8000FF;
margin: 0 300px 0 300px; <!--float: left-->
}
 
 
#footer {
margin: 0;
padding: 0;
width: 700px;
height: 50px;
background-color: #80FFFF;
}
 
 
.clear {
clear: both;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.12.2013, 08:21
Ответы с готовыми решениями:

margin-left и float с min-width
Вот такая проблема. Вот код: &lt;div style=&quot;float: left; width: 20%; min-width: 100px; max-width:...

опять ошибка.на этот раз cannot convert `float (*)(float)' to `float' in argument passing
#include&lt;stdio.h&gt; #include&lt;stdlib.h&gt; #include&lt;math.h&gt; float f1(float x)/*vira*enie 1*/ ...

Свойство margin при float
Почему если мы родительскому элементу придаем свойство float то margin-top работает в рамках...

Почему при указании float не работает margin
Почему при float не работает margin 0 auto

19
3 / 3 / 0
Регистрация: 26.11.2013
Сообщений: 37
04.12.2013, 08:27 2
попробуй использовать вместо float, position
0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
04.12.2013, 08:29  [ТС] 3
по видеокурсу делают именно так.
в том то и проблема, что я не понимаю где проблема.
0
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
04.12.2013, 08:31 4
mayazir, content 5,6,7 присвойте float: left; и сделайте margin меньше, что бы сумма width и margin не превышала 900px.
0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
04.12.2013, 08:35  [ТС] 5
а у меня ширина wrapper 900.
content 5 и 7 по 200.
content 6 в ширину 300.
итого: 700
и по 100 должно остаться на пробелы между блоками.
как раз 900.
или меня где-то глючит?
0
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
04.12.2013, 08:40 6
mayazir, да, или задайте позиционирование для content6. И отступы указывайте left/right.

Добавлено через 3 минуты
Цитата Сообщение от mayazir Посмотреть сообщение
margin: 0 300px 0 300px;
Не могу точно сказать, как браузер это понимает. В дебагере браузера, при наведении на элемент он должен выделяться и тогда можно увидеть сколько на самом деле занимает места Ваш блок.
0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
04.12.2013, 08:47  [ТС] 7
нет, не то.
я им уже всем трём по 100 присваивала, всё равно правый вниз лезет.

Добавлено через 5 минут
это скрин кода с видео.
у него всё работает.
у меня нет.
Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
0
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
04.12.2013, 08:51 8
 Комментарий модератора 
mayazir, загружайте файлы на форум!

CSS
1
2
3
4
5
6
7
8
9
#content6 {
margin: 0;
padding: 0;
width: 300px;
height: 100px;
background-color: #8000FF;
left: 300px;
position: absolute;
}
0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
04.12.2013, 08:58  [ТС] 9
так работает.
спасибо.

но, блин, как Попову удалось добиться того же, но без left: 300px; position: absolute;

не то, чтобы мне нравилось бы нудно спрашивать 20 раз одно и то же, просто хочется понять.
вроде и у автора курса сработало, и логически всё правильно, но.. не работает..

а где файлы заливать тут?
0
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
04.12.2013, 09:03 10
Цитата Сообщение от mayazir Посмотреть сообщение
а где файлы заливать тут?
https://www.cyberforum.ru/abou... 03521.html
Цитата Сообщение от mayazir Посмотреть сообщение
но, блин, как Попову удалось добиться того же, но без
Это Попов, маг и волшебник 80 уровня с параллельной вселенной, на него не стоит равняться.
0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
04.12.2013, 09:11  [ТС] 11
дело не в равнении.
просто логически всё верно.
один блок лепить к левому краю, другой к правому, ну и третий margin: 0 auto;
я один в один уже списала код, всё равно не работает.
если никто не подскажет, попробую автора курса спросить, если он, конечно, соизволит ответить..
0
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
04.12.2013, 09:27 12
mayazir, Вы платили за этот курс?
Цитата Сообщение от mayazir Посмотреть сообщение
попробую автора курса спросить, если он, конечно, соизволит ответить..
Лучше яндекс спросите, толку больше будет. И он гарантировано ответит.

Лично я рекомендую изучить HTML/CSS по книге, а не урокам бизнесмена.

Не по теме:

Задача Попова заработать денег, а не научить своих клиентов. Есть такое понятие - инфобизнес. Что это такое знает гугл или яндекс. Где-то на просторах сети даже можно найти как сам Попов рассказывает как он зарабатывает чуть ли не миллионы рублей.

0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
04.12.2013, 09:40  [ТС] 13
Цитата Сообщение от romchiksoad Посмотреть сообщение
Лично я рекомендую изучить HTML/CSS по книге, а не урокам бизнесмена.
а я и не полагаюсь лишь на видеокурс.
погуглить нет смысла, ведь чётко виден код на видео.
единственный выход - поспрашивать на форумах, что я и делаю.
0
Taatshi
05.12.2013, 10:46
  #14
 Комментарий модератора 
mayazir, я Вас официально предупреждаю. Если еще раз увижу код в виде картинки - получите карту. Код - ТОЛЬКО текстом и никак иначе. Перепечатывайте руками.
0
3 / 3 / 0
Регистрация: 21.10.2013
Сообщений: 25
05.12.2013, 11:54  [ТС] 15
не понимаю притензии.
код я написала текстом. ещё в самом первом посту.
изображение кода залитое в виде фото несколько позже - не код, а скрин с видео.
чтоб было видно, что данный код работает.. должен работать..
какой смысл в данном случае писать код руками?
0
romchiksoad
05.12.2013, 12:23
  #16

Не по теме:

Цитата Сообщение от mayazir Посмотреть сообщение
погуглить нет смысла
погуглить всегда есть смысл :) ;)

0
0 / 0 / 0
Регистрация: 28.06.2015
Сообщений: 29
14.07.2015, 21:01 17
mayazir, Столкнулся с такой же проблемой.
Выход нашелся случайно: Вместо "margin:0 auto" присвойте этому диву float:left margin-left: n px; n-сколько Вам надо
Тогда этот див отступит от предыдущего дива с float:left на n пикселей, а див с float:right поднимется и встанет в одну строку с остальными.
0
502 bad gateway
Эксперт PHP
4608 / 3748 / 1565
Регистрация: 24.04.2014
Сообщений: 10,984
14.07.2015, 21:40 18
del
0
97 / 97 / 46
Регистрация: 21.03.2012
Сообщений: 378
14.07.2015, 23:50 19
ДД, в видео показано, что он сперва прописал боковые контейнеры и только потом центральный ... т.е. вам нужно поменять местами content6 с content7

Не по теме:

а дата... просто замечательная 2 года+

0
0 / 0 / 0
Регистрация: 28.06.2015
Сообщений: 29
16.07.2015, 00:08 20
Fourd,
+1 .Cначала float:left, потом float:right и только потом центральный margin-left;
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.07.2015, 00:08

Съезжают картинки при float: left
Чем правее тем больше съезжает, помогите как быть

Не понимает Dictionary<string, (float[][] train, float[][] valid, float[][] test)> DataSet;
Доброго времени суток. Пытаюсь запустить пример по работе с библиотекой. Не понимает конструкцию ...

При использовании float:left колонки не ужимаются
Проблема в следующем. Есть контейнер, в нём две колонки, выровненные с помощью float:left, затем...

Отследить переполнение при делении float/float
Кто-нибудь, подскажите пжл, алгоритм деления float/float на ЯВУ.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.