带有信用和标题的图像 - 一个实验 [英] Image with credit and caption - an experiment
问题描述
请参阅
http：// pages.prodigy.net/chris_beall...periments.html
我最终得到的东西似乎是一个相当复杂的结构我
认为是一个有点简单的问题。即使是那么复杂的解决方案
也只适用于FireFox（还没有测试Safari ......）。
任何人都可以想出更好的解决方案，其中''更好''的意思是：
- 工作以及上面的例子，但更简单。
或
- 同样适用如上例所示，但是在更多浏览器中。
Chris Beall
See
http://pages.prodigy.net/chris_beall...periments.html
I''ve ended up with what seems like a rather complex structure for what I
thought would be a somewhat simple problem. Even that complex solution
works well only in FireFox (haven''t tested Safari...).
Can anyone come up with a better solution, where ''better'' means:
- Works as well as the example above, but is simpler.
OR
- Works as well as the example above, but across more browsers.
Chris Beall
推荐答案
Scripsit Chris Beall：
Scripsit Chris Beall:
http://pages.prodigy.net/chris_beall...periments.html
我最终看起来像一个相当复杂的结构对于
我认为这是一个有点简单的问题。
http://pages.prodigy.net/chris_beall...periments.html
I''ve ended up with what seems like a rather complex structure for
what I thought would be a somewhat simple problem.
这个问题的主要困难在于你显然希望将标题的最大宽度设置为
。也许原因是你打算在b / b
中使用该结构，其中可用的水平宽度相当于
小。
无论如何，如果你接受明确地设置宽度，而不是最大宽度继承，那么应该没有严重的困难，除非我错过了
的东西。 （我使用引号，因为max-width属性不是
继承，虽然它可能影响孩子的宽度。）
顺便说一下，在IE 7上，您的演示页面上的编号列表具有1。作为
的所有项目的数量，垂直位于最后一行的水平
项目。
-
Jukka K. Korpela（Yucca）
http://www.cs.tut.fi/~jkorpela/
The essential difficulty with the problem is that you apparently wish to set
a maximum width for the caption. Perhaps the reason is that you intend to
use the construct in contexts where the available horizontal width is fairly
small.
Anyway, if you accept setting the width explicitly, rather than maximum
width "inherited", there should be no serious difficulty, unless I''m missing
something. (I use the quotes, because the max-width property is not
inherited, though it may affect the widths of children.)
By the way, on IE 7, the numbered lists on your demo page have "1." as the
number of all items, vertically positioned at the level of the last line of
an item.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Jukka K. Korpela写道：
Jukka K. Korpela wrote:
Scripsit Chris Beall：
Scripsit Chris Beall:
> http://pages.prodigy.net/chris_beall...periments.html
我结果看起来像是一个相当复杂的结构，而我认为这是一个有点简单的问题。
>http://pages.prodigy.net/chris_beall...periments.html
I''ve ended up with what seems like a rather complex structure for
what I thought would be a somewhat simple problem.
这个问题的主要困难在于你显然希望
设置标题的最大宽度。也许原因是你想要在可用的水平
宽度相当小的上下文中使用
。
The essential difficulty with the problem is that you apparently wish to
set a maximum width for the caption. Perhaps the reason is that you
intend to use the construct in contexts where the available horizontal
width is fairly small.
Jukka，
这与一个更普遍的愿望有关：我希望限制长度
的文本行到30em左右，不仅仅是在这个结构中，而是整个网站的b $ b（有一些经过仔细考虑的例外......）。我知道并不是每个人都同意这种方法，但我相信它会在浏览条件下帮助你读取我认为很常见的可读性。
我明白其他人可能会相信，我支持他们的权利
这样做。
我对这个实验的经验是基本的困难（在
至少是让我最不满意的那个）是没有办法
说：
宽度：缩小到适合
相反，我使用了display：table，它具有所需的效果，但
对我来说就像是对''table'这个术语的扭曲一样。浮动
结构也会导致应用缩小拟合算法，但
不符合允许结构内联的目标
或居中。
Jukka,
This relates to a somewhat more general wish: I wish to limit the length
of a text line to about 30em, not just within this structure, but
throughout the site (with some carefully-considered exceptions...). I''m
aware that not everyone agrees with this approach, but I believe it
helps readability under browsing conditions that I believe are common.
I understand that others may believe otherwise and I support their right
to do so.
My experience with this experiment was that the essential difficulty (at
least the one that leaves me least satisfied) is that there is no way to
say:
width: shrink-to-fit
Instead, I have used display: table, which has the desired effect, but
feels to me like a distortion of the term ''table''. Floating the
structure will also cause the shrink-to-fit algorithm to be applied, but
that doesn''t meet the objective of allowing the structure to be inline
or centered.
无论如何，如果您接受明确设置宽度，而不是最大值
width"继承，应该没有严重的困难，除非我是b $ b缺少一些东西。 （我使用引号，因为最大宽度属性是
没有继承，但它可能会影响子节点的宽度。）
Anyway, if you accept setting the width explicitly, rather than maximum
width "inherited", there should be no serious difficulty, unless I''m
missing something. (I use the quotes, because the max-width property is
not inherited, though it may affect the widths of children.)
''继承''是我使用的错误术语。
网站的样式表包括：
p，li {max-width：30em}
因此（在结构中没有覆盖）这个限制
段落宽度是对结构中标题的约束。
''Inherited'' was the wrong term for me to use. The style sheet for the
site includes:
p, li {max-width: 30em}
thus (absent an override within the structure) this restriction on
paragraph width is a constraint on the caption within the structure.
顺便说一下，在IE 7上，编号列表在您的演示页面上有1。 as
所有项目的数量，垂直位于项目的最后一行
行的水平。
By the way, on IE 7, the numbered lists on your demo page have "1." as
the number of all items, vertically positioned at the level of the last
line of an item.
是的，我知道。 IE元素+ li元素的最大宽度=垃圾。我已将问题发布到两个MS新闻组。我相信他们会很快修复它现在很快
现在...... [那些想要在挫折中尝试锻炼的人应该尝试向b $ b报告一个IE 7错误女士。似乎永远不会发生这种可能性
给他们。]
Chris Beall
Yes, I know. IE 7 + max-width on li elements = garbage. I''ve posted
the problem to two MS newsgroups. I''m sure they will fix it Real Soon
Now... [Those who want to try an exercise in frustration should try to
report an IE 7 bug to MS. The possibility seems never to have occurred
to them.]
Chris Beall
Chris Beall写道：
Chris Beall wrote:
>
我对这个实验的体验是基本的困难（至少
）一个让我最不满意的是，没有办法
说：
宽度：缩小到适合
>
My experience with this experiment was that the essential difficulty (at
least the one that leaves me least satisfied) is that there is no way to
say:
width: shrink-to-fit
尝试使用图像大小和填充来浮动图像和信用
图像大小的一半？这应该是形象和信用...然后
所有你需要做的就是标题。
< div style =" float：left ;宽度：256PX; padding-left：128px;">
image
< div style float：right>
credit
< / div>
< div style =" float：left ....">
标题
< / div>
< div style =" float：right;宽度：256PX; padding-right：128px;">
image
< div style float：right>
credit
< / div>
< div style =" float：left ....">
标题
< / div>
Try floating the image and credit using the image size and a padding
half the size of the image? This should do the image and credit...then
all you have to do is the caption.
<div style="float:left; width:256px; padding-left:128px;">
image
<div style float:right>
credit
</div>
<div style="float:left....">
caption
</div>
<div style="float:right; width:256px; padding-right:128px;">
image
<div style float:right>
credit
</div>
<div style="float:left....">
caption
</div>
相反，我使用了display：table，它具有所需的效果，但
对我来说就像一个表的变形。浮动
结构也会导致应用缩小拟合算法，但
不符合允许结构内联的目标
或居中。
Instead, I have used display: table, which has the desired effect, but
feels to me like a distortion of the term ''table''. Floating the
structure will also cause the shrink-to-fit algorithm to be applied, but
that doesn''t meet the objective of allowing the structure to be inline
or centered.
看起来你正在做很多工作试图找到一个表格解决方案
不使用表格。值得吗？
It seems like you''re doing a lot of work trying to find a table solution
without using a table. Is it worth it?
这篇关于带有信用和标题的图像 - 一个实验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
