因此，我尝试将此 html 从顶部和左侧偏移 300 像素。到目前为止，我尝试过的所有方法都没有奏效，但如果您知道可以帮助我的页面，我会非常有兴趣阅读它......我已经有了三个框架，我想保留在这里，我试图用“pagediv”创建一个偏移量，但没有骰子。
由于我的 CSS 经验有限，我偷了框架布局(海盗骄傲)。再一次，我一直在摆弄它，试图让它出现在窗口左上角下方和右侧 300 像素处。
但它不会让步!你会怎么做？请记住，我只能将 html 插入到主机的编辑器中——这是一个非常糟糕的编辑器。我无法在服务器上管理自己的文件。哦!是的。理想情况下，我用来偏移的框架应该是清晰的——因为我放置这个 HTML 的地方已经有各种菜单和疯狂的业务在左边和上面，我不想掩盖.
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">
body{
padding-top:200px;padding-left:200px;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#pagediv{
padding-top:300px;
padding-left:300px;
}
#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 300px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}
#framecontentRight{
left: auto;
right: 0;
width: 250px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}
#maincontent{
position: fixed;
top: 0;
left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
right: 300px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}
innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is a test page for a gym", "We wholly believe in the art of strength", "Ipso liptum facto freako."]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<Font face = "helvetica">
<div id = "pagediv">
<div class = "innertube">
<div id="framecontentLeft">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<h1>Videos</h1>
</td></tr>
<tr><td align="left" valign="top">
<img src="video sample.png" width="200" height="200" />
</td></tr>
<tr><td align="left" valign="top">
<img src="video sample.png" width="200" height="200" />
</td></tr>
<tr><td align="left" valign="top">
<img src="video sample.png" width="200" height="200" />
</td></tr>
</table>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top"><h1><b> Location: </b></h1> <br />
<iframe width="200" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684" style="color:#0000FF;text-align:left">View Larger Map</a></small> <br />
Art of Strength Abilene @ Hendrick Heatlh Club <br />
2110 Pine St. Abilene, TX 79601 <br />
(325) 670-7682
</td></tr>
<tr><td align="left" valign="top">
<h1> Contact </h1>
Phone : 1 390 232 2323 <br />
Email : abeline@aos.com <br />
Website : Link
</td></tr>
<tr><td align="left" valign="top">
<img src="advertisement1.jpg" width="150" height="250" />
</td></tr>
<tr><td align="left" valign="top">
<img src="advertisement1.jpg" width="200" height="200" />
</td></tr>
<tr><td align="left" valign="top">
<img src="advertisement1.jpg" width="175" height="100" />
</td></tr>
</table>
<
</div>
</div>
<div id="maincontent">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<h1>About AOS Abeline, Texas </h1>
<p><script type="text/javascript">filltext(25)</script></p>
</td></tr>
<tr><td align="left" valign="top">
<h1>Our Training</h1>
<p><script type="text/javascript">filltext(300)</script></p>
<img src="../../Documents/punch/new aos site/Screen shot 2011-12-07 at 10.12.27 AM.png" width="307" height="243" />
</td></tr><tr><td align="left" valign="top">
<h1>Staff</h1>
<p><script type="text/javascript">filltext(10)</script></p>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</FONT>
</body>
</html>
最佳答案
您正在使用 position:absolute和 position:fixed .
参见 6.6. Choosing a positioning scheme: ‘position’ property 部分:
absolute: The box's position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Though absolutely positioned boxes may have margins, those margins do not collapse with any other margins.
fixed: The box's position is calculated according to the "absolute" model, but in addition, the box is fixed with respect to some reference. As with the "absolute" model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled.
所以一个新的 block 根本不会帮助你，因为 position:absolute 不关心它。您必须将 block 设置为 position:relative 并给它一个边距，尽管这不会修复您的 position:fixed 因为“盒子相对于视口(viewport)并且在滚动时不移动”。以下 CSS 代码将修复您的错误，但是，您的 HTML 代码是邪恶事物的可怕混合物，请对其进行塑造和润色。不要盗版复制错误的代码。学习语言。闪耀。并使用 [X]HTML validator .
body{
margin-top:200px;
margin-left:200px;
position:absolute;
top:0; left:0; bottom:0;right:0;
font-family:Helvetica;
overflow: hidden;
}
#framecontentLeft, #framecontentRight, #maincontent{
position:absolute;
top:0;
height:100%;
}
#framecontentLeft,#framecontentRight{
overflow:hidden;
}
#framecontentLeft{
left: 0;
width: 300px; /*Width of left frame div*/
}
#framecontentRight{
right: 0;
width: 250px; /*Width of right frame div*/
}
#maincontent{
left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
right: 300px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
关于html - 使用 CSS 创建页面偏移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9383210/