并排放置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技术。