0

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

我一直在处理这个页面，我试图让一个菜单浮动到网站的左侧，然后将内容浮动到网站的一侧。

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

4

2 回答 2

2

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

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

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

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

如果 5% 小于 50 像素（使整个宽度为 1000 像素），那么您的列的总和将大于整个宽度。更好的方法是使用基于百分比的填充（不是 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 将完成这项工作。我查看了您的页面，看起来您的导航宽度固定为 206 像素。因此，您对现有标记的样式会更好，例如：

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

.content {
    padding: 25px 25px 25px 231px;
}
于 2012-12-04T15:40:42.960 回答
0
  1. 你是向右而不是向左浮动。
  2. 您.content的每边都有 25px 的填充，这意味着整体为 50px。因为你menu是 25% 和content70%，如果你的容器小于 1000px，你的空间就会用完。
于 2012-12-04T15:39:04.827 回答