Плавающие встроенные div в jQuery-ui - PullRequest
Новая
       9

Плавающие встроенные div в jQuery-ui

2 голосов
/ 03 сентября 2011

Я создаю расписание с аккордеоном, в котором заголовки будут состоять из информации, возвращаемой из запроса к базе данных. Мне нужно иметь возможность поместить несколько отдельных элементов в заголовок (имя, идентификационный номер, дата, время). Когда я помещаю div в заголовок ссылки, они отображаются вертикально. Я хочу, чтобы они отображались горизонтально. Поэтому я добавил поплавок: слева; для них, но это ломает аккордеон. Вот код:

HTML 

<div id="schedule1">
    <h3 class="accordionTitle">
        <a href="#" class="accordionLink">
            Title
        </a>
    </h3>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
    </div>
</div>
<br /><br /><br />
<div id="schedule2">
    <h3 class="accordionTitle">
        <a href="#" class="accordionLink">
            <div>
                <div class="inline">title</div>
                <div class="inline">text</div>
                <div class="inline">in</div>
                <div class="inline">inline</div>
                <div class="inline">divs</div>
            </div>
        </a>
    </h3>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
    </div>
</div>

CSS 

.accordionLink {
    font-weight: bold;
}
.inline {
    float: left;
}

JS 

$(document).ready(function() {
    $('#schedule1, #schedule2').accordion({ 
        header: "h3",
        collapsible: true,
        active: false,
        fillSpace: true
    });
});

Любая помощь будет оценена.

Спасибо

Ответы [ 2 ]

4 голосов
/ 03 сентября 2011

Попробуйте 

.inline {
    display: inline-block;
    /* "float: left" must be removed */
}
1 голос
/ 03 сентября 2011

Я бы просто поместил элементы, возвращаемые из базы данных, в промежутки, и не перемещал их:

http://jsfiddle.net/MLatzke/r3SdE/

Если вам нужно сохранить их как div, вытакже можно поставить очистку (через http://nicolasgallagher.com/micro-clearfix-hack/) для родительского div:

http://jsfiddle.net/MLatzke/rk2Xn/

...