6

我想创建一个布局，我想在左侧显示图像并在右侧显示内容。当内容滚动时，图像应该保持不变。

我正在使用的CSS：

    <style type="text/css">

        #page-container
        {
            margin:auto;            
            width:900px;              
            background-color:Black;
        }

        #header
        {
           height:150px;
           width:650px;
        }

        #main-image
        {
            float:left;
            width:250px;
            height:500px;
            background-image:url('../images/main-image.png');
            position:fixed;
        }


        #content
        {
             margin-left:250px;
             padding:10px;
             height:250px;
             width:630px;
             background-color:Teal;

        }
    </style>

的HTML：

<div id="page-container">
    <div id="header"><img src="someimagelink" alt="" /></div>
    <div id="main-image"></div>
    <div id="content"></div>    
</div>

在这个网站上花了很多时间，我明白 background-attachment:fixed 将图像定位在整个视口中，而不是它应用到的元素中。

我的问题是如何创建这种布局？

我不想将该图像作为背景图像，就好像窗口已调整大小一样，它可能会被隐藏。如果窗口大小小于 900 像素（我的页面宽度），我希望出现滚动条，以便可以随时查看图像。

这段代码会发生这种情况，但是我希望图像从我的元素开始。

我该怎么做？

提前致谢 ：）

编辑：

我接受了建议并在#main-image 中添加了一个 position:fixed 属性。使用如上所示的 HTML 和 CSS。现在，我还想修复标题，使其不会移动。基本上，只有我的内容部分应该滚动。但是，如果我在标题中添加一个 position:fixed，我的 #main-image 和 #content 现在位于我的标题之上。如果我向#main-image 添加一个margin-top:150px（因为我的标题高度是150px），它可以正常工作并适当地向下移动。但是，如果我在#content 中添加一个margin-top:150px，我的标题会向下移动150px，并且仍然位于我的#content 之上。有人可以解释为什么会这样吗？提前致谢 ：）

4

3 回答 3

3

看看这个链接：

http://www.barelyfitz.com/screencast/html-training/css/positioning/

您可以学习如何使用它定位 Div。

这将解决您的问题： #main-image {position:fixed;}

编辑：我不确定是什么导致了您的问题，但这是解决方案： #content{ position:relative; top:150px; }

我的猜测：我认为这是因为使用 position:fixed 时，这 2 个 div 相对于浏览器窗口定位，而另一个相对于文档本身。

在此链接中，您将看到有关定位的更多信息，并且您可以测试与 position 属性相关的一些功能：

http://www.w3schools.com/cssref/pr_class_position.asp

About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:

http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/

于 2012-10-15T17:33:06.053 回答
0

设置min-width开html和body。

于 2012-10-15T15:34:22.353 回答
0

您是否尝试过将您的#page-container 设置为相对，将您的#main-image 容器设置为绝对，并使用顶部、底部等设置位置。然后您还应该能够将您的#content 容器浮动到右侧。

于 2012-10-15T15:46:48.023 回答