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屋！
