Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/62: Рейтинг темы: голосов - 62, средняя оценка - 4.73
1 / 1 / 0
Регистрация: 05.04.2012
Сообщений: 34
1

Два дива рядом внутри дива

29.05.2012, 17:00. Показов 11905. Ответов 6
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте! Не могу сделать вот такую конструкцию:
На приложенном изображении показаны рамки дивов. Поставить два дива рядом у меня получилось, но когда засовываю их в общий, у меня выпадает правый полностью, а левый вылазит за границы общего дива.

Помогите пожалуйста с кодом.
Миниатюры
Два дива рядом внутри дива  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 29.05.2012, 17:00
Ответы с готовыми решениями:

В диве есть два дива. Высота родительского дива равно 0
Подскажите, есть див контента, в котором две колонки. Высота контента равна нулю. почему? <div...

Выравнивание внутри дива
Подскажите как прижать второй абзац книзу блока, без помощи абсолютного позиционирования? div {...

отступ от изображения внутри дива
если в див запихнуть изображение, то от нижней границы изображение образуется пространство, как вот...

Центрирование картинки внутри дива
Здравствуйте, Подскажите как выровнять картинку внутри дива по центру и по вертикали?

6
AF
49 / 48 / 21
Регистрация: 06.10.2010
Сообщений: 115
29.05.2012, 17:36 2
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
39
40
41
42
43
44
45
46
47
48
49
50

<html>
    <head>
        <style type="text/css">
            .clear
            {
                clear: both;
                border: none;
            }
        
            div
            {
                border: 1px solid #000;
            }
            
            div.div1
            {
                width: 200px;
                height: 100px;
                padding-top: 10px;
            }
            
            div.div2
            {
                float: left;
                width: 110px;
                height: 70px;
                margin-left: 5px;
            }
            
            div.div3
            {
                float: left;
                width: 60px;
                height: 70px;
                margin-left: 10px;
            }
            
            
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
            </div>
            <div class="div3">
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>
0
1 / 1 / 0
Регистрация: 05.04.2012
Сообщений: 34
29.05.2012, 19:08  [ТС] 3
Извините, забыл уточнить. Нужно чтобы высота дивов была не фиксированой. Если подправить Ваш код, то текст из внутренних дивов будет вылазить за внешний. Как это исправить?

А вообще у меня проблема с контентом под этой структурой. Мне нужно чтобы все что снизу опускалось, когда увеличивались эти дивы. ПОэтоому я и решил взять обе таблицы в отдельный див. Может есть выход получше?
0
AF
49 / 48 / 21
Регистрация: 06.10.2010
Сообщений: 115
29.05.2012, 19:13 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
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

<html>
    <head>
        <style type="text/css">
            .clear
            {
                clear: both;
                border: none;
            }
        
            div
            {
                border: 1px solid #000;
            }
            
            div.div1
            {
                width: 200px;
                padding-top: 10px;
            }
            
            div.div2
            {
                float: left;
                width: 110px;
                margin-left: 5px;
            }
            
            div.div3
            {
                float: left;
                width: 60px;
                margin-left: 10px;
            }
            
            
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                
            </div>
            <div class="div3">
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                хаха<br />
                привет<br />
                
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>
0
1 / 1 / 0
Регистрация: 05.04.2012
Сообщений: 34
29.05.2012, 20:36  [ТС] 5
С <br> работает, спасибо!
А как сделать так, чтобы если текст не влазил, он автоматически переходил на другую строку, а то вот что выходит:
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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

<html>
    <head>
        <style type="text/css">
            .clear
            {
                clear: both;
                border: none;
            }
        
            div
            {
                border: 1px solid #000;
            }
            
            div.div1
            {
                width: 200px;
                padding-top: 10px;
            }
            
            div.div2
            {
                float: left;
                width: 110px;
                margin-left: 5px;
            }
            
            div.div3
            {
                float: left;
                width: 60px;
                margin-left: 10px;
            }
            
            
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
 
dddddddddddddddddddddddddddddddddddddd
                
            </div>
            <div class="div3">
                хаха
                привет
                хаха
                привет
                хаха
                привет
                хаха
                привет
                хаха
                привет
                
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>
Скрин:
Миниатюры
Два дива рядом внутри дива  
0
AF
49 / 48 / 21
Регистрация: 06.10.2010
Сообщений: 115
29.05.2012, 20:49 6
Текст может переноситься только по словам, одно слово разделиться не может.

Можно сделать для дивов overflow-x: scroll, будет ползунок при переполнении по ширине
1
1 / 1 / 0
Регистрация: 05.04.2012
Сообщений: 34
29.05.2012, 21:09  [ТС] 7
Действительно, бред написал.
Спасибо большое!
0
29.05.2012, 21:09
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 29.05.2012, 21:09
Помогаю со студенческими работами здесь

два Дива
Здравствуйте, помогите решить проблему, нужно чтобы Красный квадрат - это div, был всегда...

Сдвигаются два дива
Ребята! Кто шарит в хтмл верстке, просветите! Есть код... &lt;div &lt;!--1--&gt; style=&quot;background:...

Два дива горизонтально
Приветствую всех. Я только недавно начал заниматься верской и пытаюсь сделать первый шаблон. ...

Выравнить несколько дивов по центру, внутри другого дива
&lt;body&gt; &lt;div class=&quot;wrapper&quot;&gt; &lt;div class=&quot;center&quot;&gt; &lt;div...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru