贬值，贬低 - 至少它有效！ [英] Deprecated, shmeprecated - at least it works!
问题描述
好的，所以我的主题听起来有点粗鲁。尽管我愿意完全拥抱css并避免弃用。用法，有时候被弃用的东西更容易，更有效。另外，它在
最少做我想要的，而我很困惑，试图做一个
css实现做同样的事情。
这是一个简单的例子。
我希望有两个相同大小的图像以2×2显示
安排，在他们下面有一个居中的照片标题的空间。我也不想要图像触摸，他们在Mozilla中做的事情，除非我明确做出其他规定。
握住你的鼻子;这就是我的方式：
< html>
< head>
< ; style type =" text / css">
div.photofloat {float：left; vertical-align：text-top}
div.photofloat p {text-align：center; }
.withspace {padding：14px}
< / style>
< / head>
< body>
< div class =" photofloat">
< p>
< img hspace =" 14" VSPACE =" 14'; SRC =" img1.gif"宽度= QUOT; 110" height =" 70">
< img vspace =" 14" SRC =" img2.gif"宽度= QUOT; 110" height =" 70">< br>
< img hspace =" 14" SRC =" img3.gif"宽度= QUOT; 110" height =" 70">
< img src =" img4.gif"宽度= QUOT; 110" height =" 70">< br>
这里有一个标题！
< / p>
< / div> ;
< / body>
< / html>
< html>
< head>
< style type =" text / css">
div.photofloat {float：left; vertical-align：text-top}
div.photofloat p {text-align：center; }
.withspace {padding：14px}
< / style>
< / head>
好吧，在这个实现中没有活小狗被摧毁了
没有发生任何不好的事情，除了我使用了已弃用的hspace和
vspace来定位我想要它们的图像。
现在，尝试使用css（显然，不正确的CSS，因为它不是
工作），这里'我的工作是：
< body>
< div class =" photofloat">
< p>
< img class =" withspace" SRC =" img1.gif"宽度= QUOT; 110" height =" 70">
< img class =" withspace" SRC =" img2.gif"宽度= QUOT; 110" height =" 70">< br>
< img class =" withspace" SRC =" img3.gif"宽度= QUOT; 110" height =" 70">
< img class =" withspace" SRC =" img4.gif"宽度= QUOT; 110" height =" 70">< br>
这里有一个标题！
< / p>
< / div> ;
< / body>
< / html>
它不起作用！为什么不呢？
我有很多其他的东西我正在尝试用css（大多数使用
div来定位图像元素）和失败。我永远无法找到
正是我在网上寻找的东西，所以我只是试着错过了
标记。
所以我的一般问题是为什么hspace和vspace以及很多其他的有用的html功能在它们看起来很好用时会被弃用
它们的用途是什么，虽然不存在同等直接的css
等价物？
其次，请提供一些建议给我实施
上面的css。
Okay, so my subject sounds a bit crass. As much as I''d like to
totally embrace css and avoid "deprecated" usage, sometimes the
deprecated stuff is so much easier and more effective. Plus, it at
least does what I want it to, while I''m left puzzled trying to make a
css implementation do the same thing.
Here is a simple example.
I want to have four identical-sized images displayed in a two-by-two
arrangement, wtih room for a centered photo caption beneath them. I
also DON''T want the images touching, which they do in Mozilla unless I
explicitly make other arragements.
Hold your noses; here''s the way I''d do it:
<html>
<head>
<style type="text/css">
div.photofloat { float: left; vertical-align: text-top }
div.photofloat p { text-align: center; }
.withspace { padding: 14px }
</style>
</head>
<body>
<div class="photofloat">
<p>
<img hspace="14" vspace="14" src="img1.gif" width="110" height="70">
<img vspace="14" src="img2.gif" width="110" height="70"><br>
<img hspace="14" src="img3.gif" width="110" height="70">
<img src="img4.gif" width="110" height="70"><br>
And a caption here!
</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div.photofloat { float: left; vertical-align: text-top }
div.photofloat p { text-align: center; }
.withspace { padding: 14px }
</style>
</head>
Okay, no live puppies were destroyed in this implementation and
nothing bad happened, EXCEPT that I used the deprecated hspace and
vspace to position my images where I wanted them.
Now, trying it using css (obviously, incorrect css, because it''s not
working), here''s what I do:
<body>
<div class="photofloat">
<p>
<img class="withspace" src="img1.gif" width="110" height="70">
<img class="withspace" src="img2.gif" width="110" height="70"><br>
<img class="withspace" src="img3.gif" width="110" height="70">
<img class="withspace" src="img4.gif" width="110" height="70"><br>
And a caption here!
</p>
</div>
</body>
</html>
It doesn''t work! Why not?
I have many other examples of stuff I''m trying in css (mostly using
divs to position image elements) and failing. I can never find
exactly what I''m looking for on the web, so I just try and miss the
mark.
So my general question is why are hspace and vspace and a lot of other
useful features of html deprecated when they seem to work well for
what they were intended, while no equally-staightforward css
equivalent exists?
And secondly, please offer some suggestions to me to implement the
above in css.
推荐答案
在帖子< news：9h ****************** **************@4ax.com>
疑惑地说：
in post <news:9h********************************@4ax.com >
puzzled said:
我想要四个相同的 - 大小的图像以2×2的方式显示，并在其下方设有居中的照片标题。我也不想让图像接触，
I want to have four identical-sized images displayed in a two-by-two
arrangement, wtih room for a centered photo caption beneath them. I
also DON''T want the images touching,
http://stuff.bruciesusenetshit.info/...ge-thingy.html
f''ups alt .html
-
brucie
29 / November / 2003 05:09:18
http://stuff.bruciesusenetshit.info/...ge-thingy.html
f''ups alt.html
--
brucie
29/November/2003 05:09:18 am
困惑< pu ***** @ puzzled.com>写道：
puzzled <pu*****@puzzled.com> wrote:
我希望有两个相同大小的图像以2×2的方式显示，并且在它们下方有一个居中的照片标题。我也不想让图像接触，他们在Mozilla做的事情，除非我明确做出其他的说法。
没有doctype。所以你会在浏览器中自动进入怪癖模式
执行doctype嗅探。
< html>
< head>
< ; style type =" text / css">
div.photofloat {float：left; vertical-align：text-top}
浮动元素需要显式宽度。在这种情况下，浮动是没有意义的，因为没有什么跟随div一起浮动
它。这是一个更大页面的抽象吗？
vertica-align不适用于像div这样的块级元素。所以
这是没有意义的。
div.photofloat p {text-align：center; }
为什么要烦扰p？为什么只对text应用text-align？
.withspace {padding：14px}
本例中未使用。
< / style>
< / head>
< body>
< div class =" photofloat">
< p>
< img hspace =" 14" VSPACE =" 14'; SRC =" img1.gif"宽度= QUOT; 110" height =" 70">
< img vspace =" 14" SRC =" img2.gif"宽度= QUOT; 110" height =" 70">< br>
< img hspace =" 14" SRC =" img3.gif"宽度= QUOT; 110" height =" 70">
< img src =" img4.gif"宽度= QUOT; 110"高度= QUOT; 70 QUOT;><峰; br>
在所有四张图片上缺少所需的alt atrribute。
这里有一个标题！
< / p>
< / div>
< / body>
< / html>
< html>
< head>
< ; style type =" text / css">
div.photofloat {float：left; vertical-align：text-top}
div.photofloat p {text-align：center; }
.withspace {padding：14px}
< / style>
< / head>
好的，没有活的小狗被摧毁了这个实现和
没有什么不好的事情发生，除了我使用已弃用的hspace和
vspace将我的图像定位在我想要的位置。
现在，尝试使用css（显然，不正确的CSS，因为它不工作），这就是我的工作：
大概使用上面的CSS？你似乎已经在一个奇怪的地方插入了你的
评论。
< body>
< div class =" photofloat"> ;
< p>
< img class =" withspace" SRC =" img1.gif"宽度= QUOT; 110" height =" 70">
< img class =" withspace" SRC =" img2.gif"宽度= QUOT; 110" height =" 70">< br>
< img class =" withspace" SRC =" img3.gif"宽度= QUOT; 110" height =" 70">
< img class =" withspace" SRC =" img4.gif"宽度= QUOT; 110" height =" 70">< br>
这里有一个标题！
< / p>
< / div>
< /身体>
< / html>
它不起作用！为什么不？
图片没有填充它们有边距。
所以我的一般问题是为什么hspace和vspace以及很多其他的
html的有用功能在它们似乎适用于它们的目的时是否已被弃用，而没有同等存在的css
等效存在？
他们已被弃用，因此HTML可以专注于结构和
sematntics并将所有演示文稿留给CSS。
其次，请提供一些建议，以便在css中实现上面的
。
I want to have four identical-sized images displayed in a two-by-two
arrangement, wtih room for a centered photo caption beneath them. I
also DON''T want the images touching, which they do in Mozilla unless I
explicitly make other arragements.
No doctype. So you''re automatically going into quirks mode in browsers
that perform doctype sniffing.
<html>
<head>
<style type="text/css">
div.photofloat { float: left; vertical-align: text-top }
floated elements need an explicit width. In this case the float is
pointless as there''s nothing following the div to be floated alongside
It. Is this an abstraction of a larger page?
vertica-align doesn''t apply to block level elements like div. So
that''s pointless.
div.photofloat p { text-align: center; }
Why bother with the p at all? Why just apply text-align to the div?
.withspace { padding: 14px }
Not used in this example.
</style>
</head>
<body>
<div class="photofloat">
<p>
<img hspace="14" vspace="14" src="img1.gif" width="110" height="70">
<img vspace="14" src="img2.gif" width="110" height="70"><br>
<img hspace="14" src="img3.gif" width="110" height="70">
<img src="img4.gif" width="110" height="70"><br>
Missing the required alt atrribute on all four images.
And a caption here!
</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div.photofloat { float: left; vertical-align: text-top }
div.photofloat p { text-align: center; }
.withspace { padding: 14px }
</style>
</head>
Okay, no live puppies were destroyed in this implementation and
nothing bad happened, EXCEPT that I used the deprecated hspace and
vspace to position my images where I wanted them.
Now, trying it using css (obviously, incorrect css, because it''s not
working), here''s what I do:
Presumably using the CSS as above? You seem to have inserted your
comments in an odd palce.
<body>
<div class="photofloat">
<p>
<img class="withspace" src="img1.gif" width="110" height="70">
<img class="withspace" src="img2.gif" width="110" height="70"><br>
<img class="withspace" src="img3.gif" width="110" height="70">
<img class="withspace" src="img4.gif" width="110" height="70"><br>
And a caption here!
</p>
</div>
</body>
</html>
It doesn''t work! Why not?
Images don''t have padding they have margins.
So my general question is why are hspace and vspace and a lot of other
useful features of html deprecated when they seem to work well for
what they were intended, while no equally-staightforward css
equivalent exists?
They''re deprecated so that the HTML can focus on structure and
sematntics and leave all the presentation to CSS.
And secondly, please offer some suggestions to me to implement the
above in css.
<！DOCTYPE HTML PUBLIC" - // W3C / / DTD HTML 4.01 // EN">
< html>
< head>
< style type =" text / css">
div.photofloat {text-align：center;宽度：300px; float：left;}
div.photofloat img {margin：14px; }
< / style>
< / head>
< body>
< div class =" photofloat">
< img src =" img1.gif"宽度= QUOT; 110"高度= QUOT; 70" alt =" 1">
< img src =" img2.gif"宽度= QUOT; 110"高度= QUOT; 70" alt =" 2">< br>
< img src =" img3.gif"宽度= QUOT; 110"高度= QUOT; 70" alt =" 3">
< img src =" img4.gif"宽度= QUOT; 110"高度= QUOT; 70" alt =" 4">< br>
这里有一个标题！
< / div>
< / body> ;
< / html>
欢呼，
史蒂夫
- -
我的理论给你起见，我的异端邪说你，
我从不回信，你不喜欢我的领带。 - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
div.photofloat { text-align: center; width: 300px; float: left;}
div.photofloat img { margin: 14px; }
</style>
</head>
<body>
<div class="photofloat">
<img src="img1.gif" width="110" height="70" alt="1">
<img src="img2.gif" width="110" height="70" alt="2"><br>
<img src="img3.gif" width="110" height="70" alt="3">
<img src="img4.gif" width="110" height="70" alt="4"><br>
And a caption here!
</div>
</body>
</html>
cheers,
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/>
感谢Steve和Brucie提供的有用提示。一切都很好。我是b / b
因为混淆填充而感到尴尬和边际 - 那太简单了。
简单。
好的，另一个。如果我在一个div
或段落中彼此相邻的两张照片，我相信他们默认排队他们的底部
边缘甚至。我如何使用CSS使他们默认排队等待他们的TOP边缘？
Thanks Steve and Brucie for the helpful tips. All worked great. I''m
embarrassed about confusing "padding" and "margin" - that was too
simple.
Okay, another one. If I have two photos next to each other in a div
or paragraph, I believe they default to lining up with their bottom
edges even. How do I, using css, make them default to lining up with
their TOP edges even?
这篇关于贬值，贬低 - 至少它有效！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
