Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
el zurdo
5 / 5 / 6
Регистрация: 08.05.2013
Сообщений: 118
1

Блоки съезжают и не поддаются выравниванию

02.05.2018, 18:20. Просмотров 296. Ответов 3
Метки нет (Все метки)

Доброго времени суток. Частенько сталкиваюсь с такой проблемой как на картинке. Если внутри блока текст в тэге <p>, то все ровно, если вставляю ссылку <a>, то все съезжает и эту ссылку не могу сдвинуть не margin-ом и не padding-ом. Вот отрывок:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="tableHead">
    <div class="pictRow"><p>Изображение</p></div>
    <div class="nameRow"><p>Наименование товара</p></div>
    <div class="priceRow"><p>Цена</p></div>
</div>              
                
<div id="goodInCart">
    <div class="pictRow"><img class="previewCartImg" src="img/philips_monik.jpg"></div>
    <div class="nameRow"><a href="#">Монитор Philips 234ESQSB 23&rdquo;</a></div>                   
    <div class="priceRow"><p>9 000р.</p></div>
    <div class="deleteRow"><a><img class="deleteImg" src="img/deleteBtnNotActive.png"></a></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
38
39
40
41
42
43
44
45
#tableHead{
    width: 100%;
    border-bottom: solid 1px gray;
}
 
#tableHead > div{
    border: solid 1px black;
    display: inline-block;
    height: 50px;
    text-align: center;
}
 
.pictRow{
    width: 180px;   
    margin-left: 40px;
}
 
.nameRow{
    width: 550px;
}
 
.priceRow{
    width: 100px;
}
 
#goodInCart{
    border: solid 1px black;
    width: 100%;
}
 
#goodInCart > div{
    border: solid 1px black;
    display: inline-block;
    height: 140px;
    position: relative;
    text-align: center; 
}
 
.previewCartImg{
    height: 120px;
}
 
#goodInCart a{
    margin-top: 50px;   
}
Блоки можно еще выровнять с помощью vertical-align: top или display: flex, но хотелось бы понять, почему такое происходит с display: inline-block? Но все же выровняв блоки я так и не могу сдвигать текст. Как мне правильно сделать?
0
Миниатюры
Блоки съезжают и не поддаются выравниванию  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.05.2018, 18:20
Ответы с готовыми решениями:

Съезжают блоки
Привет, тут одна особенность ввела меня в ступор, ее конечно можно обойти, но хочется понять почему...

Съезжают блоки div
При смене масштаба съезжает блок, помогите исправить. Вероятно из за кривой вёрстки. p.s Давно не...

Съезжают блоки на IPad
На странице http://двери.дешёво.бел/dveri-skidki/ съезжают блоки &quot;Загородный дом...&quot; на IPad в...

Ошибки в коде,съезжают блоки
Привет,блин ставлю у блока head position:fixed; и вся верстка кувырком) вот код: &lt;html&gt; &lt;head&gt;...

Съезжают блоки при display:none
Всем добрый вечер. Сразу кидаю ссылку на песочницу https://codepen.io/anon/pen/jzmMOr. И вот в чем...

3
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
02.05.2018, 18:31 2
Цитата Сообщение от el zurdo Посмотреть сообщение
но хотелось бы понять, почему такое происходит с display: inline-block?
Так происходит, потому что по умолчанию действует правило vertical-align: baseline;

Добавлено через 1 минуту
Вам необходимо сделать css reset, то есть сбросить все стили, которые задаются самими браузерами по умолчанию, иначе у вас будет не предсказуемая верстка в разных браузерах.
0
galawar
105 / 93 / 69
Регистрация: 09.04.2018
Сообщений: 271
02.05.2018, 22:54 3
Я б такое делал с помощью flex
CSS
1
2
3
4
5
6
7
#goodInCart{
    border: solid 1px black;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
И плюс не будет отступов между элементами как при display: inline-block
0
el zurdo
5 / 5 / 6
Регистрация: 08.05.2013
Сообщений: 118
03.05.2018, 14:11  [ТС] 4
Ок, попробую еще justify-content: center.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.05.2018, 14:11

Съезжают блоки при уменьшении масштаба
Вот есть пример. &lt;div class=&quot;a&quot;&gt; &lt;div class=&quot;b&quot;&gt;&lt;/div&gt; &lt;div class=&quot;c&quot;&gt;&lt;/div&gt; &lt;/div&gt; ...

При увеличении страницы, или уменьшении окна браузера, div блоки съезжают в право
Помогите пожалуйста, при увеличении страницы, или уменьшении окна браузера, div блоки съезжают в...

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


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

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

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