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