0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 481 Просмотров
*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0
Добрый день,
Делаю свой шаблон. Есть div "icons", в нём 4 блока div (icon1, icon2, icon3, icon4) по 25%. По идее всё вместе 100% - должно влезать. Но последний блок сползает вниз - не вмещается, видно что между блоками небольшое расстояние. Если в div icons прописать font-size: 0; - то всё отображается правильно. В чем причина, может неправильно сверстано? Можно ли использовать такое решение? (боюсь что оно плохо для seo) Спасибо!

Код
<div class="icons">
<div id="icon1">
<jdoc:include type="modules" name="icon1" style="xhtml" />
</div>
<div id="icon2">
<jdoc:include type="modules" name="icon2" style="xhtml" />
</div>
<div id="icon3">
<jdoc:include type="modules" name="icon3" style="xhtml" />
</div>
<div id="icon4">
<jdoc:include type="modules" name="icon4" style="xhtml" />
</div>
</div>

Код
.icons {
position: relative;
background: #daebf9;
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
padding-bottom: 25px;
font-size: 0;
}

#icon1 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}

#icon2 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}

#icon3 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}

#icon4 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}
« Последнее редактирование: 06.03.2016, 16:45:47 от Golubevod »
*

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Убрать расстояние между блоками
« Ответ #1 : 06.03.2016, 19:27:40 »
Это из-за padding'а внутри каждого блока, он увеличивает размеры.
Чтобы этого не происходило, применяйте box-sizing:border-box;
И зачем вы дублируете одни и те же свойства для каждого блока? Не проще ли записать так:
Код: css
.icons {
position: relative;
background: #daebf9;
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
padding-bottom: 25px;
font-size: 0;
}

.icons > [id*="icon"] {
box-sizing:border-box;
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}
*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0
Re: Убрать расстояние между блоками
« Ответ #2 : 06.03.2016, 20:05:08 »
Спасибо за помощь!
1) Делаю как вы написали, всё равно при 25% последний блок улетает вниз. Приходиться ставить или 24.5% или font-size: 0;
2).icons > [id*="icon"] Как этот прием называется, где можно прочитать подробней про это? Правильно я понимаю, что всем div содержащим icon задасться один стиль? и их не нужно через запятую перечислять?
Спасибо благородный человек!

*

AlekVolsk

  • Профи
  • 6312
  • 336
Re: Убрать расстояние между блоками
« Ответ #3 : 06.03.2016, 20:55:04 »
вместо id для стилей лучше использовать класс, id - для использования в скриптах, для стилей - классы:
Код: html4strict
<div class="icons">
<div id="icon1" class="icon">
<jdoc:include type="modules" name="icon1" style="xhtml" />
</div>
<div id="icon2" class="icon">
<jdoc:include type="modules" name="icon2" style="xhtml" />
</div>
<div id="icon3" class="icon">
<jdoc:include type="modules" name="icon3" style="xhtml" />
</div>
<div id="icon4" class="icon">
<jdoc:include type="modules" name="icon4" style="xhtml" />
</div>
</div>

тогда в стилях можно записать так
Код: css
.icons > .icon {

1) Делаю как вы написали, всё равно при 25% последний блок улетает вниз. Приходиться ставить или 24.5% или font-size: 0;
сложно сказать, не видя сайта

2).icons > [id*="icon"] Как этот прием называется, где можно прочитать подробней про это? Правильно я понимаю, что всем div содержащим icon задасться один стиль? и их не нужно через запятую перечислять?
http://htmlbook.ru/css/selector/tag => в правом сайдбаре второй блок "Селекторы"

*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0
Re: Убрать расстояние между блоками
« Ответ #4 : 06.03.2016, 21:17:15 »
Спасибо.
Вот скрин. Я выделил мышкой все иконки и между ними видно "пустоту". Вот что это за воздух откуда он береться...


Если сделать display: table для icons то работает. "Пустота" пропадает.
« Последнее редактирование: 06.03.2016, 21:40:26 от Golubevod »
*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0
Re: Убрать расстояние между блоками
« Ответ #5 : 07.03.2016, 23:25:15 »
В общем разобрался в чем проблема. Может кому пригодиться.
Дело в том что элементы inline-block создают между собой отступы равные пробелу.
Решить проблему можно рядом способов. Я просто удалил все отступы между блоками:
Код
<div class="icons"><div id="icon1" class="icon"><jdoc:include type="modules" name="icon1" style="xhtml" /></div><div id="icon2" class="icon"><jdoc:include type="modules" name="icon2" style="xhtml" /></div><div id="icon3" class="icon"><jdoc:include type="modules" name="icon3" style="xhtml" /></div><div id="icon4" class="icon"><jdoc:include type="modules" name="icon4" style="xhtml" /></div>

Также пробелы можно просто закомментировать.
« Последнее редактирование: 08.03.2016, 10:54:52 от Golubevod »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как убрать заголовки категорий\?

Автор skytype

Ответов: 1
Просмотров: 21
Последний ответ 24.09.2017, 18:13:40
от djumfan
Как убрать класс wrapper для определённого модуля на фреймворке warp?

Автор partisan42

Ответов: 1
Просмотров: 93
Последний ответ 26.07.2017, 08:52:00
от effrit
Как правильно и корректно убрать адаптивность в шаблонах YOOtheme?

Автор dm-krv

Ответов: 4
Просмотров: 194
Последний ответ 07.07.2017, 21:40:42
от dm-krv
убрать в чистом шаблоне от производителя лишнее

Автор maccmaster

Ответов: 2
Просмотров: 177
Последний ответ 26.04.2017, 09:41:16
от vipiusss
Увеличить расстояние между пунктами меню

Автор ownell

Ответов: 2
Просмотров: 165
Последний ответ 24.04.2017, 11:10:44
от ownell