DIV + CSS +定位 [英] div+css+positioning
问题描述
嗨伙计们!
我在下面写了这段代码,我想得到这个效果:
[div width = 100%[ div727px [div1 left] [div2居中] [div3 right]
727px]]
但是,必定会有一些错误。请给我一些建议。
问候,
Cezary。
[CSS]
..logo {
宽度:269px;
背景重复:无重复;
background-image:url(' 'logo_ramka.gif'');
text-align:center;
身高:73px;
vertical-align:middle
}
..timer {
宽度:130px;
}
..toptable {
宽度:100%;
身高:90px;
background-image:url(''bar1.gif''); < br $>
}
..toptable727 {
宽度:727px;
身高:90px;
text-align:left;
padding:8px 0px 0px 0px;
background-image:url(''bar1.gif'');
}
[HTML]
< div class =" toptable">
< div class =" toptable727">
< div class =" logo">< img width =" 259"高度= QUOT; 61" src =" logo.gif"
alt =" Logo">< / div>
< div class =" timer">
<! - 计时器 - >
< script language =" javascript"如果(FlashInstalled())
FlashWrite(''timer.swf'',60,60);
else
document.write(''< img src =" blank.gif" width =" 1" height =" 1"
alt ="& nbsp;">'');
< / script>
< noscript>
< img src =" blank.gif"宽度= QUOT 1 QUOT;高度= QUOT 1 QUOT; ALT ="计时器" border =" 0">
< / noscript>
< / div>
< / div> ;
< / div>
Hi Folks!
I wrote this below code and I want to get this effect:
[div width=100% [div727px [div1 left][div2 centered][div3 right]
727px] ]
but, there must be some errors. Please give me some advices.
Regards,
Cezary.
[CSS]
..logo{
width:269px;
background-repeat:no-repeat;
background-image:url(''logo_ramka.gif'');
text-align:center;
height:73px;
vertical-align:middle
}
..timer{
width: 130px;
}
..toptable{
width:100%;
height:90px;
background-image: url(''bar1.gif'');
}
..toptable727{
width:727px;
height:90px;
text-align:left;
padding: 8px 0px 0px 0px;
background-image: url(''bar1.gif'');
}
[HTML]
<div class="toptable">
<div class="toptable727">
<div class="logo"><img width="259" height="61" src="logo.gif"
alt="Logo"></div>
<div class="timer">
<!-- Timer -->
<script language="javascript" type="text/JavaScript">
if (FlashInstalled())
FlashWrite(''timer.swf'',60,60);
else
document.write(''<img src="blank.gif" width="1" height="1"
alt=" ">'');
</script>
<noscript>
<img src="blank.gif" width="1" height="1" alt="timer" border="0">
</noscript>
</div>
</div>
</div>
推荐答案
这是我的代码:
http://www.intertek.com.pl/test/index.htm
我想得到:从左边阻挡A,挡住红色区块B的中心,阻挡C
吧。
我该怎么办?请给我一些建议。
问候,
Cezary。
Here is my code:
http://www.intertek.com.pl/test/index.htm
I want to get: block A from left, block B center of red block, block C
right.
How can I do it ? Please give me some advices.
Regards,
Cezary.
这是我的代码:
http://www.intertek.com.pl/test/index。 htm
我想得到:从左边阻挡A,挡住红色区块B的中心,阻挡C
吧。
我该怎么办?请给我一些建议。
问候,
Cezary。
Here is my code:
http://www.intertek.com.pl/test/index.htm
I want to get: block A from left, block B center of red block, block C
right.
How can I do it ? Please give me some advices.
Regards,
Cezary.
Cezary / 2004-04-14 18: 57:
Cezary / 2004-04-14 18:57:
这是我的代码:
http://www.intertek.com.pl/test/index.htm
我想得到:从左边的块A,块B的中心红色块,块C
对。
我该怎么办?请给我一些建议。
Here is my code:
http://www.intertek.com.pl/test/index.htm
I want to get: block A from left, block B center of red block, block C
right.
How can I do it ? Please give me some advices.
只需添加一些规则(其中一些只是撤销你的规则):
.. toptable727
{
职位:相对;
}
..logo
{
持仓:绝对;
剩余:8px;
}
..timer
{
text-align:left;
margin-left:auto;
margin-right:auto;
float:none;
left:auto;
position:static;
width:10em;
}
..loginout
{
职位:绝对;
右:4px ;
top:3px;
}
(也就是说,使用.logo和.loginout的绝对定位,只需
让.timer流到应该去的地方。旧版本的MSIE
有一个错误,阻止他们将.timer元素集中在
仅限边距。解决方法是指定
$ b的text-align:center $ b ..toptable727元素。当然你有一个*非常好的理由使用
的像素单元?)
我建议你阅读规范并理解如何
绝对定位在尝试使用之前有效。
http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS21/visuren.h...tioning-scheme
http://www.w3.org/TR/CSS21/visudet.h。 ..hs_and_margins
如果你想让结果与不同的
版本的MSIE兼容,请继续:
http://msdn.microsoft.com/ library / en ... hancements.asp
-
Mikko
Just add some rules (some of these just undo your rules):
..toptable727
{
position: relative;
}
..logo
{
position: absolute;
left: 8px;
}
..timer
{
text-align: left;
margin-left: auto;
margin-right: auto;
float: none;
left: auto;
position: static;
width: 10em;
}
..loginout
{
position: absolute;
right: 4px;
top: 3px;
}
(That is, use absolute positioning for .logo and .loginout and just
let the .timer to flow where it should go. Older versions of MSIE
have a bug that prevents them from centering the .timer element with
the margin only. Workaround is to specify text-align: center for the
..toptable727 element. Surely you have a *really* good reason to use
the pixel unit?)
I''d suggest you to read the specification and understand how
absolute positioning works before trying to use it.
http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS21/visuren.h...tioning-scheme
http://www.w3.org/TR/CSS21/visudet.h...hs_and_margins
And in case you want to make the results compatible with different
versions of MSIE, continue here:
http://msdn.microsoft.com/library/en...hancements.asp
--
Mikko
这篇关于DIV + CSS +定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!