css - 将右菜单向左移动？

Question

我想把右边的菜单移到左边，问题是我不能重新排列所有的 html，我必须用 CSS 来做。 HTML 模板如下所示:

<style type="text/css">
#all{background:gray;width:400px}
#content{
 background:yellow;width:300px;
 position:absolute;
 margin-left:100px;
 float:left;
}
#menu{background:red;width:100px}
#footer{background:green}
</style>

<div id="all">
    <div id="content">
    Content<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>

    <div id="menu">
    Menu<br/>Menu<br/>Menu<br/>Menu<br/>Menu<br/>Menu<br/>
    </div>

    <div id="footer">
    Footer
    </div>
</div>

它有效...但是如果内容比菜单长(高度)，它会越过页脚。

我想在底部设置页脚，它应该“附加”到#menu 和#content。我可以通过重新排列模板内的 html 来解决这个问题，将菜单移到顶部(并调整一些 css)，但我无法更改 html。

感谢任何想法:)

Answer 1

不完全确定你在这里需要什么(你的措辞有点奇怪，什么是“附加”？)，但最常用的方法是简单地将它们 float 到你需要的任何一边，比如这个:

#all{
    background: gray;
    width:400px;
}
#content{
    background:yellow;
    width:300px;
    float: right;
}
#menu{
    background:red;
    width:100px;
    float: left;
}
#footer{
    background:green;
    clear: both;
}

参见:http://www.jsfiddle.net/yijiang/4Rxky/