1

我创建了一个页面，其中一个静态图像位于浏览器的全高度（上面有一个渐变）和左侧的文本块。我希望图像随浏览器窗口调整大小，但我不希望图像位于文本后面或小于文本。当我在主体上设置最小宽度和最小高度时，例如 1024x768，这并不能解决问题。难道我做错了什么？我该怎么做呢？

提前致谢！

这是我的代码：

<style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}
#background-image {
    position: absolute;
    right: 0;
    top: 0; 
    height: 100%;
    background-image: url('image.jpg');
    z-index: -1;
}
#background-gradient {
    position: absolute;
    right: 0;
    top: 0; 
    z-index: 0;
    height: 100%;
}
#content {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 500px;
    font-family: Georgia;
    font-size: 16px;
}
p.dropcap:first-letter {
    float: left;
    font-size: 50px;
    line-height: 30px;
    padding-top: 2px;
    padding-right: 4px;
    font-family: Georgia;
}
h1 {
    font-size: 55px;    
}
</style>
</head>

<body>
<img id="background-image" src="image.jpg" />
<img id="background-gradient" src="gradient.png" />
<div id="content">
<h1>[TITLE]</h1>
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p>
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p>
</div>
</body>
4

2 回答 2

0

将所有 HTML 代码放在containerdiv 中，该 div 直接位于body. 然后，您可以将 CSS 代码从 body 移动到#container，如下所示：

#container {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}

IIRC 你不能设置min-width在身体上。不过你要小心，因为早期版本的 IE 不支持min-width.

于 2012-04-07T15:01:01.497 回答
0

只需 float:right 和 float:left 并添加一个边距即可让它看起来像以前的
Demo

于 2012-04-07T15:08:54.143 回答