Смещение дочерних блоков

@Dazz1e · Регистрация: 26.01.2015

Студворк — интернет-сервис помощи студентам

Имеется один основной блок, в нем второй дочерний и в дочернем куча блоков на 100% заполнении дочернего.

В дочернем указываю ширину для блока в 100%.
Дальше у меня идет еще один блок, я так же указываю 100%, но у меня появляется смещение.
Для теста создал ниже еще один блок, у него смещение такое же как и предыдущего. В чем может быть трабла? Коды CSS идентичны, а смещение имеется.

Вот код пяти блоков:

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
.b { //основной блок
    width: 60%;
    height: auto;
    top: 21%;
    right: 20%;
    left: 20%;
    position: fixed;
    border: solid red;
}
.box {//дочерний блок
    width: 100%;
    min-height: 450px;
    height: auto;
 
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: white;
    background: -moz-linear-gradient(#eeefef, #ffffff 10%);
    background: -ms-linear-gradient(#eeefef, #ffffff 10%);
    background: -o-linear-gradient(#eeefef, #ffffff 10%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
    background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
    background: linear-gradient(#eeefef, #ffffff 10%);
    border: solid red;
}
.b_one { //первый блок в дочернем блоке (стоит как надо, ровно)
    float: top;
    float: left;
    width: 85%;
    height: 130px;
    border: solid red;
}
.top_block { //блок с неизвестным смещением
    text-align: center;
    width: 85%;
    float: left;
    float: top;
    min-height: 100px;
    border: solid red;
}
.bottom_block { // второй блок с неизвестным смещением
    text-align: center;
    bottom: 10px;
    width: 85%;
    float: left;
    float: bottom;
    min-height: 100px;
    border: solid red;
}

В правой части дочернего имеется еще один блок, он занимает 15% правой стороны.

Картинка показывающая смещение:

@Shakalaka · 23.03.2015, 14:59

Не по теме:

float:top и float:bottom - это сильно).

А вообще, выложи еще HTML, ибо тут сложно что-то понять.

@сахей · 23.03.2015, 15:21

Dazz1e, загрузи код на jsfiddle.com
и кинь ссыль=)
ну и попробуй задать у всех нулевые отступы=)

CSS
1
*{padding:0;margin:0;}

@Dazz1e · 23.03.2015, 15:22 **[ТС]**

Вот!)

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
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="windows-1251" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Тест</title>
        <link rel="shortcut icon" href="favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="js/modernizr.custom.63321.js"></script>
            <!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
        <style>
        body {
            background: #D3D3D3;
            }
 
        </style>
    </head>
    <body>
        <h1 class="h1_1">Титульный титул))</h1>>
        <div class="container">
            <header>
        <div class="b">
                <div class="box">
                <div class="b_one">Бла бла бла бла бла бла бла !!!!</div>
                <div class="top_block" id="top">
                        <h33>Верхний блок</h33><br/>
                </div>
                <div class="bottom_block" id="bottom">
                        <h33>Нижний блок</h33><br/>
                        <input type="text" id="1_get" onclick="comp_set_1()" readonly value="asd">
                </div>
                </div>
                </div>
            </header>
        </div>
    </body>
</html>

@сахей · 23.03.2015, 15:24

http://jsfiddle.net/

Добавлено через 2 минуты
http://jsfiddle.net/5of9gn88/ тут нет никаких отступов

@Dazz1e · 23.03.2015, 15:27 **[ТС]**

Отступы помогли, спасибо.
Но ведь они не обязательны, по умолчанию они стоят: 0

Как сам не додумался?!)))

Добавлено через 1 минуту
Пока еще тут, еще есть вопрос. Читал в каком то мануале, что если в материнском высота стоит auto, то дочерняя высота может быть указана только в пикселях, в процентах она не робит. А есть ли возможность обойти?

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	23.03.2015, 14:59
	Не по теме: float:top и float:bottom - это сильно). А вообще, выложи еще HTML, ибо тут сложно что-то понять. 0

@сахей 65 / 65 / 20 Регистрация: 26.02.2013 Сообщений: 336 Записей в блоге: 1
	23.03.2015, 15:24
	http://jsfiddle.net/ Добавлено через 2 минуты http://jsfiddle.net/5of9gn88/ тут нет никаких отступов 0

@Dazz1e 0 / 0 / 0 Регистрация: 26.01.2015 Сообщений: 8
	23.03.2015, 15:27 [ТС]
	Отступы помогли, спасибо. Но ведь они не обязательны, по умолчанию они стоят: 0 Как сам не додумался?!))) Добавлено через 1 минуту Пока еще тут, еще есть вопрос. Читал в каком то мануале, что если в материнском высота стоит auto, то дочерняя высота может быть указана только в пикселях, в процентах она не робит. А есть ли возможность обойти? 0

Опции темы