Вкладки пользовательского интерфейса jQuery: как поместить div с помощью свойства float: left во вкладку?

Question

Я использую jQuery UI 1.8.16 для вкладок.Я хочу разместить в первой вкладке несколько элементов div в виде столбцов (со свойством float:left).

Но я не могу сделать это правильно: похоже, вкладки не хотят работать со свойством float надлежащим образом (см. изображение под текстом).

Есть код:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
        <div id="tabs-1">
                <div style="border:1px solid red;float:left;">
                    some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>
                </div>
        </div>
        <div id="tabs-2"></div>
        <div id="tabs-3"></div>

</div>

Как это исправить?

Спасибо!

Answer 1

Вы должны очистить ваши поплавки , чтобы контейнер вычислил правильную высоту:

<div id="tabs-1">
    <div style="border: 1px solid red; float: left;">
        some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>
    </div>
    <div style="clear: both;"></div>
</div>

Вы можете увидеть результаты в этой скрипке .