css - 在同一行制作两个div？

Question

如何让两个 div 在网站上的同一“行”中对齐？

我一直在研究 this page ，我试图获得一个 float 到网站左侧的菜单，然后将内容 float 到该菜单的一侧。

我试过将其用作 div 的 CSS:

.menu
{
    width:25%;
    height:auto;
    margin-bottom:2px;
    float:right;
    position:fixed;

}
.content
{
    width:70%;
    height:50%;
    margin-bottom:2px;
    padding: 25px;
    float:right;
}

该页面并未并排和 float 显示它们，而是显示大多数网站，例如:http://www.exorithm.com/ ，其中有侧边栏和内容区域。谁能帮忙？

我所有的代码:http://pastebin.com/KqYkrweE

Answer 1

我认为问题在于您在菜单上有 position:fixed 。如果您使用固定位置或绝对位置，它会从文档流中删除该元素，因此 float:right 变得无关紧要。

编辑:这是实现相同结果的更好示例

另请记住，您使用的是宽度百分比，然后应用基于像素的填充。这可能会导致元素对于页面而言变得太宽，并且一个元素显示在另一个之下。

70% + 25% = 95% with 5% left over.

如果 5% 小于 50 像素(使整个宽度为 1000 像素)，那么您的列的总和将大于整个宽度。更好的方法是使用基于百分比的填充(不能 100% 确定它的效果如何)或将填充、边距和边框应用于 float 列内的元素，如下所示:

// CSS
.leftCol {
    float:left;
    width:25%;
}

.rightCol {
    float:left;
    width:75%;
}

.content {
    padding:25px;
}

// Markup
<div class="leftCol">
    <div class="menu">
        Here is my menu
    </div>
</div>
<div class="rightCol">
    <div class="content">
        Here is my content
    </div>
</div>

编辑 2:如果您希望您的菜单在用户向下滚动时保留在屏幕上，那么 position:fixed 将完成这项工作。我查看了您的页面，看起来您的导航宽度固定为 206 像素。因此，现有标记的样式最好像这样:

// CSS
.menu {
    position:fixed;
    left:0;
    top:0;
    width:206px;
}

.content {
    padding: 25px 25px 25px 231px;
}