html - 在 jQuery 选项卡中并排布局 div

Question

我花了几个小时试图找出如何在 jQuery 选项卡中将 2 个 div 彼此相邻布局。通常，我只是 float :给两个 div 加上一些样式，它们开箱即用。在 jQuery 选项卡中布置 div 有什么 secret 吗？

我将不胜感激任何帮助，因为这让我很生气。我已经包含了我正在试验的代码。非常感谢。

<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