Форум русской поддержки Joomla!® CMS
07.12.2016, 14:40:21 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Убрать расстояние между блоками

 (Прочитано 242 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Golubevod
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 39


« : 06.03.2016, 17:31:03 »

Добрый день,
Делаю свой шаблон. Есть 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, 17:45:47 от Golubevod » Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #1 : 06.03.2016, 20:27:40 »

Это из-за padding'а внутри каждого блока, он увеличивает размеры.
Чтобы этого не происходило, применяйте box-sizing:border-box;
И зачем вы дублируете одни и те же свойства для каждого блока? Не проще ли записать так:
Код
.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
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 39


« Ответ #2 : 06.03.2016, 21:05:08 »

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

Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #3 : 06.03.2016, 21:55:04 »

вместо id для стилей лучше использовать класс, id - для использования в скриптах, для стилей - классы:
Код
<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>

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

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

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

Записан
Golubevod
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 39


« Ответ #4 : 06.03.2016, 22:17:15 »

Спасибо.
Вот скрин. Я выделил мышкой все иконки и между ними видно "пустоту". Вот что это за воздух откуда он береться...


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

Репутация: +0/-0
Offline Offline

Сообщений: 39


« Ответ #5 : 08.03.2016, 00: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, 11:54:52 от Golubevod » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet