Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Dazz1e
0 / 0 / 0
Регистрация: 26.01.2015
Сообщений: 8
1

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

23.03.2015, 14:43. Просмотров 505. Ответов 5
Метки нет (Все метки)

Имеется один основной блок, в нем второй дочерний и в дочернем куча блоков на 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% правой стороны.

Картинка показывающая смещение:
0
Изображения
 
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.03.2015, 14:43
Ответы с готовыми решениями:

смещение блоков
Здравствуйте! Подскажите , почему смещаются блоки на сайте при просмотре на телефоне. Как...

Смещение блоков с текстом
Есть 4 блока: <div><h1>test</h1><p>Бла, бла, бла</p></div> ...

Смещение div блоков
когда меняешь высоту у одного из блоков leftmenu rightmenu и mainmenu, то смещаются два других вниз...

Смещение div блоков
В блоке header есть несколько div'ов которые не хотят оставаться на местах и съезжают из div блока....

Смещение 2х блоков на строке
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Камни</title> ...

5
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
23.03.2015, 14:59 2

Не по теме:

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


А вообще, выложи еще HTML, ибо тут сложно что-то понять.
0
сахей
65 / 65 / 20
Регистрация: 26.02.2013
Сообщений: 336
Записей в блоге: 1
23.03.2015, 15:21 3
Dazz1e, загрузи код на jsfiddle.com
и кинь ссыль=)
ну и попробуй задать у всех нулевые отступы=)
CSS
1
*{padding:0;margin:0;}
0
Dazz1e
0 / 0 / 0
Регистрация: 26.01.2015
Сообщений: 8
23.03.2015, 15:22  [ТС] 4
Вот!)
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>
0
сахей
65 / 65 / 20
Регистрация: 26.02.2013
Сообщений: 336
Записей в блоге: 1
23.03.2015, 15:24 5
http://jsfiddle.net/

Добавлено через 2 минуты
http://jsfiddle.net/5of9gn88/ тут нет никаких отступов
0
Dazz1e
0 / 0 / 0
Регистрация: 26.01.2015
Сообщений: 8
23.03.2015, 15:27  [ТС] 6
Отступы помогли, спасибо.
Но ведь они не обязательны, по умолчанию они стоят: 0

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

Добавлено через 1 минуту
Пока еще тут, еще есть вопрос. Читал в каком то мануале, что если в материнском высота стоит auto, то дочерняя высота может быть указана только в пикселях, в процентах она не робит. А есть ли возможность обойти?
0
23.03.2015, 15:27
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.03.2015, 15:27

Смещение блоков друг на друга
Значит есть картинка, и справа от нее меню. При уменьшении окна меню наползает на картинку, как с...

Смещение блоков при масштабировании
Имеется блок wrapper. В нем 2 дочерних блока block1 и block2. Блоки стоят в ряд, но при...

Смещение блоков в разных браузерах
Добрый вечер. Столкнулся с такой проблемой. В различных браузерах текст подымается вверх, а именно...


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

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

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