Jquery 选项卡边框线以 div 部分内容展开

Question

这允许我在选项卡部分并排显示两个 div，但是围绕选项卡的边框线与 div 中的内容不一致。它没有正确展开。任何人都知道如何解决这个问题？

aspx

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Main</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <div id="container">
            <div id="first">
                sdfd<br />
                sdfdf</div>
            <div id="second"></div>
         </div>
    </div>
    ...
</div>

css

#container
{
    width: 900px;
    background-color: #ffcc33;
    margin: auto;
}
#first
{
    width: 200px;
    float: left;
    /*height: 300px; */ /* take this out to work wit below solution*/
    background-color: blue;
}
#second
{
    width: 700px;
    float: left;
    height: 300px;
    background-color: green;
}
#clear
{
    clear: both;
}

Answer 1

让标签也浮动

#tabs{
 float:left;
 width: 100%;
}

Jquery 选项卡边框线以 div 部分内容展开

Jquery tabs border line to expand with div section content

javascript

jquery

css

jquery-ui