Get image to stay fixed even with window resize

牧云@^-^@ 提交于 2019-12-12 04:18:21

问题


I'm trying to get an image to stay fixed even after the window is resized but it drifts off to the right and you end up seeing a black space. If you start to drag the window size to the left than you can slowly see the image start to come back into view. Any ideas how to solve this problem?

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>

来源:https://stackoverflow.com/questions/9827067/get-image-to-stay-fixed-even-with-window-resize

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!