即使窗口调整大小,也可以保持图像保持固定

时间:2012-03-22 17:07:05

标签: html css css3 css-position

我试图让图像保持固定,即使在窗口调整大小后它向右偏移,你最终看到一个黑色空间。如果您开始将窗口大小拖动到左侧,则可以慢慢看到图像开始返回到视图中。任何想法如何解决这个问题?

CSS:

@charset "utf-8";
body, html{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background:#000;
    margin:0;
    padding:0;
    color:#000;
    text-align:center;
}
.container{
    text-align:left;
    width:1100px;
    margin:auto;
    overflow:hidden;
}
.sidebar1 {
    position:relative;
    display:table-cell;
    width: 200px;
    background: #000;
    overflow:hidden;
    padding-bottom: 10px;
}
.content {
    position:relative;
    background:#FFFFFF;
    padding: 10px 15px;
    width: 670px;
    overflow:hidden;
    display:table-cell;
}
.sidebar2 {
    overflow:hidden;
    position:relative;
    display:table-cell;
    width: 200px;
    padding: 10px 0;
}
.sidebar2 .img{
    bottom:0;
    position:absolute;
    z-index:9999;
}
.fltrt{
    float: right;
    margin-left: 8px;
}    
.fltlft{
    float: left;
    margin-right: 8px;
}
.clearfloat{
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Model Offers Now</title>
<link rel="stylesheet" type="text/css" media="screen" href="ext/style.css">
</head>
<body>
<div class="container">
<div class="sidebar1">
&nbsp;
</div>
<div class="content">
<p>
<b style="font-size:14px">Model Offers Now</b> presents you to the right executive Producers and Publishers based on your profile and answers below.
</p>
<p>
<fieldset style="border-color:#FF0000;">
<legend style="top:-10px;position:relative;"><img src="images/warning-icon.png" style="width:48px;height:40px;"> BEWARE</legend>
Modeling and Talent representatives should never be paid by you to initiate this process. There is no cost or obligation to use this and/or our service.
</fieldset>
</p>
<p>
<fieldset>
<legend>Requied</legend>
</fieldset>
</p><p>
<fieldset>
<legend>Optional</legend>
</fieldset>
</p>
</div>
<div class="sidebar2">
<img src="images/6.png" class="img">
</div>
</div>
</body>
</html>

0 个答案:

没有答案