css - 修复居中 div 左侧的 div

标签 css layout html

我这辈子都做不到。我想要一个固定的 div(菜单)位于居中的 div(内容)的左侧。当窗口变小时,页面应该能够像往常一样调整大小,固定的 div 接触左窗口墙。

我画了一张我想做的图:

Image of what I want to accomplish

编辑 我希望能够调整窗口大小并且内容和菜单不应从左侧浏览器墙上掉落。而且菜单应该始终相对于内容固定...编辑

EDIT2 以下内容完全符合我的要求(xFortyFourx 的扩展解决方案):

#body{width: 1200px; border: 1px solid #000; margin: 0 auto;}
#wrap {width: 800px;min-width: 800px;min-height: 1800px;margin: 0px auto;border: 2px #000 solid;position: relative;}
#sidebar {width: 160px;height: 100px; border: 2px #000 solid;position: absolute;top: 0;left: -180px;}
#fixed{position: fixed; width: 160px; height: 50px; background-color: #234324;}
<div id="body"><div id="wrap"><p>Content</p><div id="sidebar"><div id="fixed"><p>Sidebar</p></div></div></div></div>

EDIT2

最佳答案

HTML

<div id="wrap">
<div id="sidebar"> </div>
</div>

CSS:

#wrap {
    width: 950px;
    min-height: 400px;

    margin: 50px auto;
    border: 2px #000 solid;

    position: relative;
}
    #sidebar {
        width: 50px;
        height: 100px;
        border: 2px #000 solid;
        position: absolute;
        top: 0;
        left: -70px;
    }

编辑:这是一个示例 http://jsfiddle.net/XWkBw/

关于css - 修复居中 div 左侧的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10380899/

相关文章:

php - Magento:如何对以编程方式通过扩展添加的 js 文件使用 removeItem

java - 使用 Java Swing 的显示器中的可调节面板

javascript - 将带有 ASCII 控制字符的条形码扫描到输入字段中

css - 子 div 扩展出父 div 问题

html - 如果没有 display "list-item"CSS display "list"有什么用?

css - 如何更改位于另一个 DIV 中的 DIV 中的背景颜色

css - 用CSS构建国际象棋图

javascript - 如何使用 Canvas 将圆与线连接起来

html - 具有两个液柱的无表布局(液体 - 固定 - 液体)

javascript - 具有不同 ID 的第二个模态打开时会产生不同的效果 - 为什么?