Javascript jQuery选项卡小部件显示问题

我在呈现jQuery选项卡小部件时遇到困难。在Fiddle中，您将看到两幅图像。如果单击Professional Advisers图像，将显示选项卡小部件。如果单击行业小部件，将呈现jQuery模式对话框

问题在于tabs小部件的显示方式——它应该像模式对话框一样在图像下方的区域整齐地打开。我不确定这是否是一个CSS问题（我尝试过以各种方式设置#tabs元素的样式，但没有成功），或者我是否需要改变我的样式（我尝试过将#tabs div放入professional advisors div中，但没有成功）

HTML

<a href="#" id="professional-advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>
<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Law firms</a>
    </li>
    <li><a href="#tabs-2">Accounting and audit firms</a>
    </li>
    <li><a href="#tabs-3">Management consultants and economists</a>
    </li>
    <li>
        <button id="closeTabs">X</button>
    </li>
</ul>
<div id="tabs-1">
    <p>Law firm text goes here</p>
</div>
<div id="tabs-2">
    <p>Accounting and audit firm text goes here</p>
</div>
<div id="tabs-3">
    <p>Management consultants and economists text goes here.</p>
</div>
</div>
<div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div>

CSS

.circle {
width: 220px;
height: 220px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;
/* text styling for circles - see also the .text style below */
font-size: 35px;
color: #FFF;
line-height: 220px;
text-align: center;
font-family: Ubuntu, sans-serif;
}
#dialog #tabs {
font-family:'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em;
}
.advisers {
background: #5E2750;
margin-left: 28%;
margin-right: 13%;
}
.advisers-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.industry {
background: #DD4814;
}
.industry-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.hovershadow:hover {
box-shadow: 0px 0px 4px 4px #AEA79F
}
.text {
/* used by professional advisers circle */
line-height: 40px;
padding-top: 70px;
height: 150px
}

---

在你的圆圈后尝试一个清除div：

.circle {
width: 220px;
height: 220px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;
/* text styling for circles - see also the .text style below */
font-size: 35px;
color: #FFF;
line-height: 220px;
text-align: center;
font-family: Ubuntu, sans-serif;
}
#dialog #tabs {
font-family:'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em;
}
.advisers {
background: #5E2750;
margin-left: 28%;
margin-right: 13%;
}
.advisers-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.industry {
background: #DD4814;
}
.industry-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.hovershadow:hover {
box-shadow: 0px 0px 4px 4px #AEA79F
}
.text {
/* used by professional advisers circle */
line-height: 40px;
padding-top: 70px;
height: 150px
}

<a href="#" id="professional-advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>
<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div style="clear: both;"></div>

<div id="tabs">