Question

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

我一直在研究this page，我试图让一个浮动到网站左侧的菜单，然后将内容放到一边。

我尝试将其用作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;
}

页面不是并排显示并浮动，而是大多数网站，例如：http://www.exorithm.com/，它们有侧边栏和内容区域。有人可以帮忙吗？

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

Answer 1

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

编辑：以下是实现相同结果的更好示例

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

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

如果5％小于50px（整个宽度为1000px），那么您的列总数将大于整个宽度。更好的方法是使用基于百分比的填充（不是100％确定其工作原理）或将填充，边距和边框应用于浮动列内的元素，如下所示：

// 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将完成工作。我查看了你的页面，看起来你有一个206px的固定宽度导航。因此，现有标记的样式会更好：例如：

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

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

Answer 2

你向左而不是离开。
您的.content每侧有25px的填充，这意味着总共50px。由于您的menu为25％，content为70％，因此如果您的容器小于1000px，则空间不足。

在同一行中制作两个div？

2 个答案: