Question

我知道这是一个菜鸟和重复的问题，但我需要一些答案。

我认为：宽度为1的div：100％，宽度内有2个div：宽度为50％。它不适合吗？

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

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

Answer 3

问题在于inline-block：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

将display: inline-block;替换为float: left;

..然后你可以在＃top-menu中添加overflow: hidden以清除花车。

更新：

您可能需要从＃top-menu中删除height: 100px才能使用overflow: hidden clearfix技术。

Answer 4

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;
}

将div放在一起的正确方法

4 个答案: