将右侧菜单向左移动？答案

【问题标题】：Move Right Menu to left?将右侧菜单向左移动？
【发布时间】：2010-10-11 09:17:31
【问题描述】：

我想把右边的菜单移到左边，问题是我不能重新排列所有的 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。

感谢您的任何想法:)

【问题讨论】：

标签： css html menu

【解决方案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/

【讨论】：