包含制表符的Div块和常规的Div块.并排放置，中间留有空间

Question

我有两个div块，一个是制表符，一个是普通的。这里是html:

<div id = "container"></div>
<div>
<ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <!--Content-->
        </div>
        <div id="tab2" class="tab_content">
           <!--Content-->
        </div>
        <div id="tab3" class="tab_content">
           <!--Content-->
        </div>
    </div>
</div>

我想把它们并排放置，在它们之间留出空间。

https://i.stack.imgur.com/QPv2I.png! [] dsd1

Answer 1

您可以使用float或inline-block来实现这类功能。

css:

.tabs, .tab_container{
 float:left;
}

可能你也必须阅读这些文章:

http://css-tricks.com/795-all-about-floats/

http://css-tricks.com/37-the-how-and-why-of-clearing-floats/

编辑:

按照下面的注释写:

.tabs, .tab_container{
     display:inline-block;
     white-space:normal;
    }

,将white-space转化为parent

.parent{white-space:nowrap}

Html:

<div class="parent">
    <ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <!--Content-->
        </div>
        <div id="tab2" class="tab_content">
           <!--Content-->
        </div>
        <div id="tab3" class="tab_content">
           <!--Content-->
        </div>
    </div>
</div>

Answer 2

是的，float:left做了sandeep说的工作，但是要小心IE6的Float/Margin bug。我知道IE6现在几乎已经被淘汰了，但是为了以防万一。