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

Question

我正在开发 joomla 模板，我有两个 div，每个 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(top, menu) 中的第二个(top-menu, search) 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;
}

当我将宽度 100% 放在 #top 中时，它工作正常，但宽度发生了变化。知道如何在不使用 width:100% 的情况下解决这个问题；

Answer 1

网格有 12 列，您使用的是 9+3 ..所以完整的网格。您应该检查 div 中的边距，并将它们设置为 0。这通常是它现在按您预期的方式工作的原因。