浮动问题 [英] Float Question

问题描述

我对浮动图像感到烦恼。我正在使用DMX2004

试用版。


不幸的是，这在NN7& NN4.7：


风格：


1，div：


.. navboxcontent {

background-color：＃F0FFF0;

border-color：＃C0C0C0;

border-style：dashed;

border-width：1px;

颜色：＃008000;

font-family：Verdana，Geneva，Arial，Helvetica，sans-serif;

字体大小：x-small;

填充：2px;

宽度：350px;

}


2，应用于图像的样式（图像放在带有

文本的div中）：

..marginleft {

浮动：左; * /不适用于NN4.7样式表/ *

保证金：0 10px 10px 0;

}


3， html的例子：

< div class =" navboxcontent">

< p>< a href =" supremecss.htm">< ; img class =" marginleft"

src =" images / thumbnails / tn_suplaquee_50.jpg"宽度= QUOT; 55" height =" 36"

border =" 0"> Supreme：largeur 3,20m< / a>< / p>

< / div>


完美的IE6，NN4.7中可接受但有些错误（但无论如何谁使用该浏览器

）并完全废话NN7。后者让我惊讶 - NN7通常是好的b $ b。我讨厌想想它在Opera中的表现。我试过把

" marginleft" navboxcontent中的样式无济于事。


这是上面已经启动并运行的页面：

http://www.gardenserre.com/elite_isolees_homecss.htm


任何人的想法？我哪里出错了？


谢谢


Peter

Hi,

I''m having a spot of bother with floating images. I''m using the DMX2004
trial.

Unfortunately, this would not work in NN7 & NN4.7 :

The styles :

1, The div :

..navboxcontent {
background-color: #F0FFF0;
border-color: #C0C0C0;
border-style: dashed;
border-width: 1px;
color: #008000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
padding: 2px;
width: 350px;
}

2, The style applied to the image (the image is placed in the div with the
text) :
..marginleft{
float: left; */not applied to the NN4.7 stylesheet/*
margin: 0 10px 10px 0;
}

3, example of the html :
<div class="navboxcontent">
<p><a href="supremecss.htm"><img class="marginleft"
src="images/thumbnails/tn_suplaquee_50.jpg" width="55" height="36"
border="0">Supreme : largeur 3,20m</a></p>
</div>

Perfect in IE6, acceptable but buggy in NN4.7 (but who uses that browser
anyway) and completely crap in NN7. The latter surprises me - NN7 is usually
okay. I hate to think how it must appear in Opera. I''ve tried putting the
"marginleft" style in "navboxcontent", to no avail.

Here''s a page where the above is up and running :

http://www.gardenserre.com/elite_isolees_homecss.htm

Any ideas anyone ? Where have I gone wrong ?

Thanks

Peter

推荐答案

在文章中Peter Kennedy写道：

In article Peter Kennedy wrote:

我有一个对浮动图像感到困扰的地方。我正在使用DMX2004
试用版。


[ http：// www。 gardenserre.com/elite_isolees_homecss.htm]


似乎这不是你遇到的问题。例如，你没有

工作导航，但两个不工作。使这些图像链接在顶部有

链接到部分而不是该下拉列表。还可以从图像中删除额外的空格

，并使用html / css在浏览器中分发它们。并且

他们是文本链接。


还有很多其他问题，包括缺少alt属性，不可读

字体，糟糕的质量文本图形 - 它们实际上看起来比

文本更糟糕。


你还修复了宽度白化的原因。
完美的IE6和NN7完全废话。后者让我惊讶 -
NN7通常没问题。我讨厌想想它在Opera中的表现。


是的，NN7显示通常比IE更好。这是暗示你，它主要是

意味着IE正在渲染错误的东西。当Opera显示与mozilla相同的

时，IE是错误的（很少有exeptions）。


在7.22（之前）中不起作用直到我添加

..navboxcontent {clear：both;}

解决了这个问题。

我哪里出错？

Hi,

I''m having a spot of bother with floating images. I''m using the DMX2004
trial.
[http://www.gardenserre.com/elite_isolees_homecss.htm]

Seems that this is not wrost problem you have. You for example don''t have
working navigation, but two unworking. Make those image links on top have
links to sections instead of that dropdown. Also strip extra whitespace
from images and distribute them across browser using html/css. And make
them text links.

Lots of other problems also, including missing alt atributes, unreadable
font, lousy quality of text graphics - they actually look much worse than
text would.

You also fix width whitout reason.
Perfect in IE6 and completely crap in NN7. The latter surprises me -
NN7 is usually okay. I hate to think how it must appear in Opera.
Yes, NN7 displays usually better than IE. That is hint for you, it mostly
means that IE is rendering something wrongly. And when Opera shows same
as mozilla, IE is wrong (with very few exeptions).

Doesn''t work in 7.22(pre) untill I add
..navboxcontent {clear:both;}
Which cures the problem.
Where have I gone wrong ?

我猜你认为盒子的高度高于图像，然后它就是b $ b不是。 IE有这样的情况出现的bug，但我不确定

如果这是原因，它可能也是不同的设置不同

浏览器。

-

Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>

Saapi l？hett ?? meili？，jos aihe ei liity ryhm ?? n，tai on yksityinen

tjsp。，mutta？l？ L·海特？ samaa viesti？ meilitse ja ryhm ?? n。

I guess you assumed that height of box is higher than image, and then it
isn''t. IE has bug that shows up in situations like this, but I''m not sure
if that is the reason, it might also be different settings different
browsers.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi l?hett?? meili?, jos aihe ei liity ryhm??n, tai on yksityinen
tjsp., mutta ?l? l?het? samaa viesti? meilitse ja ryhm??n.

文章Lauri Raittila写道：

In article Lauri Raittila wrote:

我哪里出错？
我猜你认为盒子的高度高于图像

Where have I gone wrong ?
I guess you assumed that height of box is higher than image

^^^^^

而不是，图像和它的10px底部边距。

，然后它
不是。 IE有这样的情况出现的bug，但我不确定
如果这是原因，它可能也是不同的设置不同的浏览器。

^^^^^
rather, image and it''s 10px bottom margin.
, and then it
isn''t. IE has bug that shows up in situations like this, but I''m not sure
if that is the reason, it might also be different settings different
browsers.

-

Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>

Saapi l？hett ?? meili？，jos aihe ei liity ryhm ?? n，tai on yksityinen

tjsp。，mutta？l？ L·海特？ samaa viesti？ meilitse ja ryhm ?? n。

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi l?hett?? meili?, jos aihe ei liity ryhm??n, tai on yksityinen
tjsp., mutta ?l? l?het? samaa viesti? meilitse ja ryhm??n.

" Peter Kennedy" < PE ********** @ nope.com>写道：

"Peter Kennedy" <pe**********@nope.com> wrote:

。navboxcontent {
background-color：＃F0FFF0;
border-color：＃C0C0C0;
border-style：dashed;
border-width：1px;
颜色：＃008000;
font-family：Verdana，Geneva，Arial，Helvetica，sans-serif;
font-size：x-small;
填充：2px;
宽度：350px;
}
2，应用于图像的样式（图像放置在div中，带有
文字）：
.marginleft {
float：left; * /不适用于NN4.7样式表/ *


希望评论不在真正的样式表中。它是由内而外。

保证金：0 10px 10px 0;
}

http://www.gardenserre.com/elite_isolees_homecss.htm

任何想法？我哪里出错了？

.navboxcontent {
background-color: #F0FFF0;
border-color: #C0C0C0;
border-style: dashed;
border-width: 1px;
color: #008000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
padding: 2px;
width: 350px;
}

2, The style applied to the image (the image is placed in the div with the
text) :
.marginleft{
float: left; */not applied to the NN4.7 stylesheet/*
Hope that comment isn''t in the real stylesheet. It''s inside out.
margin: 0 10px 10px 0;
}
http://www.gardenserre.com/elite_isolees_homecss.htm

Any ideas anyone ? Where have I gone wrong ?

你忘记了（a）当

父元素时浮动不会自动结束结束，（b）浮标从文件流中取出

，因此不计入父元素的高度。


It不是很完美但是对于初学者你可以添加

min-height：64px;

clear：left;

to .navboxcontent


史蒂夫


-

我的理论适用于你，我的异端邪说你，

我从不回信，你也不喜欢我的领带。 - 医生


Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>

You''ve forgotten that (a) floats aren''t automatically ended when the
parent element ends, and (b) floats are taken out of the document flow
and thus don''t count towards the height of the parent element.

It''s not perfect but for starters you can add
min-height: 64px;
clear: left;
to .navboxcontent

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

这篇关于浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！