Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблема с версткой, display:inline-block

Автор: sgustok 19.3.2009, 15:08

У меня возникла проблема. есть страница http://www.sgustok.org/archive/demo/demo.html . справа идет ряд блоков (content-right-music). не могу разобраться почему под Firefox и Opera после каждого блока появляться ненужный пробел (отступ). Подскажите пожалуйста как его убрать!

CSS стиль блока content-right-music:

Код


        .content-right-music {            
            background-color:#f9abdd;
            width: 125px;
            margin: 0px 0px 30px 0px;
            padding:0px;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            *display: inline;
        }

HTM Код:

Код



<div id="contener">

    <div class="content-box" id="content-box-music">
        <div class="content-left">
            <h1><a href="#">_Music</a></h1>
            <div class="content-left-categories">
                Categories 1<br />
                Categories 2<br />
                Categories 3<br />
            </div>    
        </div>        
        <div class="content-right">
        
            <div class="content-right-music">    
                <!-- IMG -->
                <div class="content-right-music-img">
                    <a href="#"><img src="zym019-con_cetta-sclerosis-125x125.jpg"></a>
                </div>
                <!-- Заголовок -->
                <div class="content-right-music-entry-title">
                    <h1><a href="#">Entry Title Entry Title Entry Title Entry Title</a></h1>
                </div>
            </div>    

            ...

            <div class="content-right-music">    
                <!-- IMG -->
                <div class="content-right-music-img">
                    <a href="#"><img src="zym019-con_cetta-sclerosis-125x125.jpg"></a>
                </div>
                <!-- Заголовок -->
                <div class="content-right-music-entry-title">
                    <h1><a href="#">Entry Title Entry Title Entry Title Entry Title</a></h1>
                </div>
            </div>    
            
        </div>    
        <div class="clear"></div>        
    </div>
    
</div>

Автор: webster 19.3.2009, 22:05

Очевидно, что связано это с так называемыми "пробельными символами", если вы, например, напишете теги слитно:

Код


 </div><div class="content-right-music">

то подобная проблема исчезнет, но это не выход, правильнее использовать "плавающие блоки" одинаковой высоты, т.к. контент отдельных элементов у вас похожий.

Автор: sgustok 19.3.2009, 23:33

спасибо помогло)

"плавающие блоки" не подходят, так-как мне нужно чтобы текст помещался любой длинны и в зависимости от этого растягивалась высота блока, а те блоки которые в низу должны опускаться вниз..

если использовать "плавающие блоки" то этого не добиться.

может есть какой-то другой способ избавиться от этих "пробельных символов"?

спасибо)

Автор: SelenIT 21.3.2009, 18:45

Универсального красивого решения, насколько мне известно, нет. Из некрасивых вариантов, кроме простого удаления пробелов, можно предложить следующее:

Обнулить размер шрифта для общего контейнера, для самих инлайновых блоков вернуть дефолтный (не панацея для старых Опер);
Задать общему контейнеру word-spacing: -0.3em, для самих инлайновых блоков вернуть word-spacing: 0;
Задать блокам margin-right: -0.3em;
Использовать не дивы, а список, воспользоваться опциональностью закрывающих тегов для LI (IE7-, как недавно выяснилось, в любом случае игнорирует закрывающие <li>);
Обернуть пробелы между тегами в комментарии (хотя это еще хуже, чем просто удалить их)...

На мой взгляд, простое удаление пробелов (поднять открывающие теги к предыдущему закрывающему) - наименьшее зло.

Автор: Djigit 27.12.2011, 00:50

для вёрстки по phoshop макету можно ли div'ы располагать inline-block,чем делать их плавающими? не является ли это чем-то в корне неверным?

Автор: SelenIT 27.12.2011, 04:37

Можно, не является, определяется задачей. У инлайн-блоков есть дополнительные бонусы по сравнению с "поплавками" (напр., их можно http://chikuyonok.ru/2011/04/inline-vertical-align/, центрировать по горизонтали и т.д.), но есть и трудности (та же значимость межтеговых пробелов).

Автор: Djigit 27.12.2011, 05:15

ну межтэговые пробелы можно по-старинке устранить,перенося строки в коде не как обычно,а "разрывая" тэг внутри

<div></div><div
></div>

Автор: SelenIT 27.12.2011, 06:35

Вариантов куча. Обычно такие блоки всё равно генерятся шаблонизатором и достаточно один раз его настроить.