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简单地转移到你需要的任何一方，如下所示： / p>

#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/

向右移动菜单到左边？

1 个答案: