Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
V@D!k
249 / 249 / 98
Регистрация: 26.07.2010
Сообщений: 1,685
#1

Не одинаково отображаются margin-ы - HTML, CSS

15.06.2015, 15:29. Просмотров 165. Ответов 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
51
52
53
54
55
56
57
58
<div class="row checkbox ">
            <h3>Steinbeis Produkte / WeiSSgrade</h3>
            <div class="item">
                <label>
                        <input type="checkbox" name="tx_stpsaleslab_pi1[form][products][]" value="1">
                        <div class="description"><span style="border-bottom: 5px solid #B2B863;">STEINBEIS <strong>ClassicWhite</strong></span><br>
                            <img src="uploads/pics/stp_saleslab/ClassicWhite.png" width="69px" heigth="108px" alt="">
                            <p class="top">Das Papier fГјr besonders umweltbewusste Anwender.</p>
                            <p class="bottom">ISO 70 / CIE 55</p>
                        </div>
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" name="tx_stpsaleslab_pi1[form][products][]" value="2">
                    <div class="description">
                        <span style="border-bottom: 5px solid #082543;">STEINBEIS <strong>EvolutionWhite</strong></span><br>
                        <img src="uploads/pics/stp_saleslab/EvolutionWhite.png" width="69px" heigth="108px" alt="">
                        <p class="top">Das reprГ¤sentative Eco - Premium- Papier.</p>
                        <p class="bottom">ISO 100 / CIE 135</p>
                    </div>
                </label>
            </div>
            
            <div class="item">
                <label>
                    <input type="checkbox" name="tx_stpsaleslab_pi1[form][products][]" value="3">
                    <div class="description">
                        <span style="border-bottom: 5px solid #E8874C;">STEINBEIS <strong>TrendWhite</strong></span><br>
                        <img src="uploads/pics/stp_saleslab/TrendWhite.png" width="69px" heigth="108px" alt="">
                        <p class="top">Das Multifunktionspapier fГјr den tГ¤glichen BГјroeinsatz.</p>
                        <p class="bottom">ISO 80 / CIE 85</p>
                    </div>
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" name="tx_stpsaleslab_pi1[form][products][]" value="4">
                    <div class="description">
                        <span style="border-bottom: 5px solid #F7A3A6">STEINBEIS <strong>MagicColour</strong></span><br>
                        <img src="uploads/pics/stp_saleslab/MagicColour.png" width="69px" heigth="108px" alt="">
                        <p class="top">Das Papier fГјr Kennzeichnung und Organisation</p>
                        <p class="bottom">5 Farben</p>
                    </div>
                </label>
            </div>
            <div class="item">
                <label>
                    <input type="checkbox" name="tx_stpsaleslab_pi1[form][products][]" value="5">
                    <div class="description">
                        <span style="border-bottom: 5px solid #78BDE4;">STEINBEIS <strong>PureWhite</strong></span><br>
                        <img src="uploads/pics/stp_saleslab/PureWhite.png" width="69px" heigth="108px" alt="">
                        <p class="top">Das Papier fГјr anspruchsvolle OfficeKommunikation.</p>
                        <p class="bottom">ISO 90 / CIE 110</p>
                    </div>
                </label>
            </div>
        </div>
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
.item{
    width: 50%;
    padding-bottom: 2%;
    height: auto;
}
.item:nth-child(even){
    float: left;
    clear: both;
    position: relative;
}
.item:nth-child(odd){
    float: right;
}
.item img{
    padding-top: 10px;
}
.description{
    display: inline-table;
    padding-left: 3%;
}
 .description p.top{
    width: 48%;
    margin-top: -25%;
    margin-left: 20%; 
}
.item:nth-child(odd) .description p.top{
    width: 50%;
    margin-top: -30%;
    margin-left: 25%; 
}
.description p.bottom{
    margin-left: 20%;
    color: grey;
}
.item:nth-child(odd) .description p.bottom{
    margin-left: 25%; 
}
не могу побороть эти отступы

Добавлено через 3 минуты
или вот ссылка самой страницы клац http://www.cyberforum.ru/html/thread2178151.html
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.06.2015, 15:29
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Не одинаково отображаются margin-ы (HTML, CSS):

Margin-top и margin-bottom в ie6 не работает
#news1 &gt; p { margin-top:15px; margin-bottom:15px; } пробовал ставить...

Не смещается центр div c margin 0 auto, который в другом div'e с другим margin
&lt;div style=&quot;margin-left: 100px&quot;&gt; &lt;div style=&quot;margin: 0 auto;&quot;&gt;&lt;a href=&quot;&quot;...

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

Одинаково для всех...
Как сделать так что бы картинки и информация на тексте сохраняла свои размеры...

Margin-~
Заказчик заказал строго по центру разместить его картинку на любом мониторе....

2
Mikhail Shell
50 / 50 / 39
Регистрация: 15.11.2014
Сообщений: 626
15.06.2015, 20:05 #2
V@D!k, может быть с кодировкой что-то не то. У меня все margin'ы работают: скрин в конце. Поставьте для файла в меню utf-8 без BOM, и в код страницы.
HTML5
1
<meta charset="utf-8" />
Только margin'ы чуть-чуть различаются скорее всего из-за того что ширина картинок различается. Поставьте одинаковую.
0
Миниатюры
Не одинаково отображаются margin-ы  
V@D!k
249 / 249 / 98
Регистрация: 26.07.2010
Сообщений: 1,685
15.06.2015, 20:30  [ТС] #3
Mikhail Shell, там width указан жестко для картинок.

Добавлено через 1 минуту
а правильный вариант вы увидели, потому что я уже в коде через style прописал для второго блока блока
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.06.2015, 20:30
Привет! Вот еще темы с решениями:

margin
Всем привет ув. Программисты помогить найти выход из решения Есть блоки ...

margin
Здравствуйте. Задаю элементу margin-bottom: 5px; margin-top: auto; ...

Margin of <td>
У меня есть вот такая вот табличка. Как сделать margin между &lt;td&gt; ноль и как...

Незадача с margin
Всем привет. Помогите новичку разобраться с margin-ом. Вот код:...


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

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

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