Question

我花了好几个小时试图弄清楚如何在jQuery选项卡中相互布局2个div。通常情况下，我只是浮动：将两个div都留有一些样式，它们开箱即用。在jQuery选项卡中布置div是否有一些秘密。

我很感激任何帮助，因为这会让我开始香蕉。我已经包含了我正在尝试的代码。非常感谢。

<div id="tabContainer">
     <!-- the tabs -->
        <div id="tabs">
            <ul>
            <li><a href="#tabs-1">tab1</a></li>
            <li><a href="#tabs-2">tab2</a></li>
            <li><a href="#tabs-3">tab3</a></li>
            <li><a href="#tabs-4">tab4</a></li>
            </ul>

            <div id="tabs-1">

                <p>Tab1</p>

            <div id="tabRight">This is right div which I need to place next to tabs-1 div</div>

            </div>


            <div id="tabs-2">

                <p>Tab2</p>

            </div>

            <div id="tabs-3">

                <p>Tab3</p>

            </div>

            <div id="tabs-4">

                <p>Tab4</p>

            </div>

        </div>
</div>

CSS（最小）

#tabContainer { float: left; padding-bottom: 1px; margin-top:200px;}
#tabs-1 { float:left; }
#tabRight { float:left; }

Answer 1

您需要将float: left提供给<p>Tab1</p>

我建议将<p>Tab1</p>包裹在div中，然后将float: left包含在其中。

Answer 2

您应该在＃tabs-1标签中创建两个单独的div。

<div id="tabs-1">
    <div class='tabLeft'>Tab Left</div>
    <div class="tabRight">Tab Right</div>
</div>

给他们造型：

.tabRight { float:left; }
.tabLeft { float:left; }

布局在jQuery选项卡中并排显示

2 个答案: