並排放置div的正確方法

Question

我知道它是一個noob和重複的問題，但我需要一些答案。

我認爲：1格寬度：100％和2格內寬度：50％each.WHy它不適合？

HTML：

<div id="top-menu"> 
    <div id="logo"></div>    
    <div id="menu-top"></div> 
</div> 

CSS：

#top-menu{ 
    width: 100%; 
    height: 100px; 
    position: relative; 
    border: 1px solid black; 
    background-color: #A3238E; 
} 

#logo{ 
    width: 50%; 
    height: 100px; 
    position: relative; 
    display: inline-block; 
    background: orange; 
} 

#menu-top{ 
    width: 50%; 
    height: 100px; 
    position: relative; 
    display: inline-block; 
    background: green; 
    left: 0; 
} 

我得到的2 div之間出現一點空白，但我不知道如何刪除它... 另外，如果我用寬度設置第二個：49％，它工作...但有50％它沒有，我猜這是因爲他們之間的小空白。

如何使它工作？

Answer 1

，你需要使用以下命令：

#top-menu{ 
    width: 100%; 
    height: 100px; 
    position: relative; 
    border: 1px solid black; 
    background-color: #A3238E; 
} 

#logo{ 
    width: 50%; 
    float:left; 
    height: 100px; 
    position: relative; 
    display: inline-block; 
    background: orange; 
} 

#menu-top{ 
    width: 49%; 
    float:left; 
    height: 100px; 
    position: relative; 
    display: inline-block; 
    background: green; 
    left: 0; 
} 

發現我加float:left;到您並排想邊的兩個div。然後在你的HTML中使用如下：

<div id="top-menu"> 
    <div id="logo"></div>    
    <div id="menu-top"></div> 
    <div style="clear:both;"></div> 
</div> 

通知我加<div style="clear:both;"></div>這將清除float:left;。如果您願意，可以使用<div style="clear:left;"></div>來做同樣的事情。

Answer 2

• http://jsfiddle.net/UbQq9/

#top-menu{ 
    width: 100%; 
    height: 100px; 
    position: relative; 
    border: 1px solid black; 
    background-color: #A3238E; 
    display: table; 
} 

#logo{ 
    width: 50%; 
    height: 100px; 
    position: relative; 
    display: table-cell; 
    background: orange; 
} 

#menu-top{ 
    width: 50%; 
    height: 100px; 
    position: relative; 
    display: table-cell; 
    background: green; 
} 

Answer 3

只需添加float: right;到#menu-top：http://jsfiddle.net/n5md7/

Answer 4

問題是因爲inline-block：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

更換display: inline-block;與float: left;

..然後你可以添加overflow: hidden到＃頂部菜單來清除浮動。

UPDATE：

您可能需要從＃頂級菜單中刪除height: 100px使用overflow: hidden clearfix技術。