Question

我的页面左侧有一个导航栏。此栏是固定的，因此可以随页面滚动。

现在我想将我的内容与其右侧对齐，但我不想明确指定导航栏或页面内容的宽度/边距，以便导航栏可以展开以适合其文本。

我怎么能用CSS做这样的事情？

我正在使用position: fixed来对齐导航栏，如下所示：

#navbar,
#navbar > ul,
#navbar > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#navbar > ul {
    position: fixed;
    float: none;
    background: #fff;
}
#navbar > ul > li {
    float: none;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle;
}

这是HTML：

<div id='navbar'>
    <ul>
        <li><a class="nav" href='#home'><span>Home</span></a></li>
        <li><a class="nav" href='#articles'><span>Articles</span></a></li>
        <li><a class="nav" href='#about'><span>About</span></a></li>
    </ul>
</div>

Answer 1

演示：http://codepen.io/theskumar/full/slgfi（调整浏览器大小以查看效果）
代码：http://codepen.io/theskumar/pen/slgfi

进一步的帮助
你应该有两个主级容器，宽度为％。一个绝对定位，可以滚动，其他定位固定。

现在您可以根据需要将内容放入这些容器中。它们适合并调整大小。

Answer 2

如果您不想指定任何容器的宽度，可以使用float: left;和display: block;，然后通过jQuery在其中一个容器上动态设置最大宽度。

查看我的小提琴：http://jsfiddle.net/ZxQLV/

侧边栏基本上可以有任何宽度，内容div将适应它。尝试更改两者的内容并再次运行小提琴。

与固定元素的右边对齐

2 个答案: