在CSS中需要帮助DIV对齐（位置）

Question

我正在开发joomla模板，我有两个div，每个有2个div。                   边界          顶部菜单         

    <div id='menu' class='span12' >
    <div id='mainmenu' class='span9'> Main Menu</div>
    <div id='search' class='span3'> Search </div>
    </div>

我正在使用bootstrap.min.css 一切都很好，但我的第二个（顶级，菜单）中的第二个（顶级菜单，搜索）div在完成我的第一个div之后显示，但在顶部边界之下; 这是我的CSS风格

#top
{
background-color: black;
height:40px;
}
#top-border
{
background-color: red;
height:30px;
float:left;
}
#top-menu
{
background-color: blue;
float:right;
height:30px;
}
#menu
{
background-color: purple;
height:50px;
}
#mainmenu
{
background-color: yellow;
height:40px;
}
#search
{

background-color: brown;
float:right;

height:40px;
}
#photo
{
background-color: green;
margin-right:-20px;
height:300px;
}

当我在#top中放置100％的宽度时，它工作正常，但宽度会改变。 知道如何在不使用宽​​度的情况下解决这个问题：100％;

Answer 1

网格有12列，你使用9 + 3..so完整的网格。您应该检查div中的保证金，并将它们设置为0.这通常是为什么它现在按照您的预期运作。