CSS图片库问题 [英] CSS image gallery question
问题描述
您好，
我正试图找到一种方法来水平设置一行图像，这样就可以自动获得图像数量
适合屏幕的宽度
，具体取决于用户监视器的分辨率。例如，我
通常使用这样的东西：
< div id =" lrgcontainer">
< ; div id =" img">< a href ="＃">图片名称< br /< img src =" img.jpg"
alt = "等等" />< / a>< / div>
< div id =" img">< a href ="＃">图片名称< br />< img src =" img.jpg"
alt =" blah" />< / a>< / div>
< div id =" img">< a href ="＃">图片名称< br />< img src =" img.jpg"
alt =" blah" />< / a>< / div>
< / div>
所述布局背后的样式将是这样的：
#lggcontainer {
宽度：800px;
}
#img {
保证金：0 50px 0 50px;
浮动：左;
}
如果我需要另一个一排图像，我会做类似的事情< br
style =" clear：left;" /并重复。然而，这（在我看来）创建了
a多次重复id =img等等。是否可以使用尽可能多的图像自动填充
宽度尽可能，然后当
没有更多空间时，将它们放在下一行？
我会感激任何输入。 />
谢谢，
Adam
Hello,
I''m trying to find a way to setup a row of images horizontally, so that
the number of images will automatically fit the width of the screen
depending on the resolution on the user''s monitor. For example, I
usually use something like this:
<div id="lrgcontainer">
<div id="img"><a href="#">Name of Image <br /<img src="img.jpg"
alt="blah" /></a></div>
<div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
alt="blah" /></a></div>
<div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
alt="blah" /></a></div>
</div>
The styling behind said layout would be something like this:
#lrgcontainer {
width:800px;
}
#img {
margin: 0 50px 0 50px;
float:left;
}
And then if I need another row of images, I would do something like <br
style="clear:left;" /and repeat. However this (in my opinion) creates
a lot of redundant repetition of id="img", etc. Is it possible to fill
the width automatically with as many images as possible, and then when
there is no more room, put them on the next line down?
I''d appreciate any input.
Thanks,
Adam
推荐答案
文章
< 11 ********************* @ l53g2000cwa.googlegroups。 com>，
ak****@gmail.com 写道：
In article
<11*********************@l53g2000cwa.googlegroups. com>,
ak****@gmail.com wrote:
你好，
我正试图找到一种方法来水平设置一行图像，这样就可以了解b / b
图像将自动适合屏幕的宽度
，具体取决于用户监视器的分辨率。例如，我
通常使用这样的东西：
< div id =" lrgcontainer">
< ; div id =" img">< a href ="＃">图片名称< br /< img src =" img.jpg"
Hello,
I''m trying to find a way to setup a row of images horizontally, so that
the number of images will automatically fit the width of the screen
depending on the resolution on the user''s monitor. For example, I
usually use something like this:
<div id="lrgcontainer">
<div id="img"><a href="#">Name of Image <br /<img src="img.jpg"
而不是所有这些，你先尝试过一个非常简单的事情：
< div>
< img src =" img1.jpg" alt =" blah">
< img src =" img2.jpg" alt =" blah">
< img src =" img3.jpg" alt =" blah">
< img src =" img4.jpg" alt =" blah">
< img src =" img5.jpg" alt =" blah">
< / div>
？
我遗漏了高度和宽度，但你不应该。您可以将
放在上面，或者，如果它们都是相同的dims，则在css
下img {}
使用HTML 4.01作为doctype，然后你不需要麻烦的 />" s
（但不仅仅是因为这个原因，这是奖金之一）
-
dorayme
Instead of all this, have you tried what is utterly simple first:
<div>
<img src="img1.jpg" alt="blah">
<img src="img2.jpg" alt="blah">
<img src="img3.jpg" alt="blah">
<img src="img4.jpg" alt="blah">
<img src="img5.jpg" alt="blah">
</div>
?
I leave out the height and widths, but you should not. You can
put them in above, or, if they are all the same dims, in the css
under img {}
Use HTML 4.01 as a doctype, then you don''t need the pesky " />"s
(but not just for this reason, that''s a bonus one)
--
dorayme
Scripsit ak****@gmail.com ：
Scripsit ak****@gmail.com:
我正试图找到一种水平设置一行图像的方法，所以
图像的数量会自动适合
屏幕的宽度取决于用户监视器的分辨率。
I''m trying to find a way to setup a row of images horizontally, so
that the number of images will automatically fit the width of the
screen depending on the resolution on the user''s monitor.
屏幕？你可能意味着浏览器中画布的宽度。
Screen? You probably meant the width of the canvas in the browser.
< div id =" lrgcontainer">
< div id =" img">< a href ="＃">图片名称< br /< img src =" img.jpg"
alt ="嗒嗒" />< / a>< / div>
< div id =" img">< a href ="＃">图片名称< br />< img src =" img.jpg"
alt =" blah" />< / A>< / DIV>
<div id="lrgcontainer">
<div id="img"><a href="#">Name of Image <br /<img src="img.jpg"
alt="blah" /></a></div>
<div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
alt="blah" /></a></div>
这是不正确的标记，因为id属性值在
内必须是唯一的文件，而你显然正在使用所有人的价值相同。 （这是很难确定的b $ b，因为你的样本非常粗略，而且你没有发布网址。）
更改ID =" img" to class =" img"在HTML中，CSS中的#img到.img是
首次修复所需的。
That''s incorrect markup, since the id attribute value must be unique within
the document and you''re apparently using the same value for all. (It''s
difficult to be sure, since your sample is otherwise so sketchy and you
didn''t post a URL.)
Changing id="img" to class="img" in HTML and #img to .img in CSS is the
first fix needed.
#lggcontainer {
宽度：800px;
}
#lrgcontainer {
width:800px;
}
什么？您描述了灵活布局的想法，现在您将
宽度设置为800像素。根本不要在这里设置宽度。
What?? You described the idea of flexible layout and now you are setting the
width to 800 pixels. Simply don''t set the width at all here.
#img {
保证金：0 50px 0 50px;
float：left;
}
#img {
margin: 0 50px 0 50px;
float:left;
}
这真的有效吗？必须有一些你没告诉我们的东西（关于一个URL怎么样？
），因为一个div元素占用了可用的宽度，所以浮动
不能被应用。
如果设置宽度，就像你需要做的那样，你显然需要设置像素，因为宽度是图像以像素为单位。我是
担心没有工作捷径（除非HTML标记可能会以编程方式生成） - 每个div元素需要有它的
宽度设置。如果图像共享相同的宽度并且你想保持这样的东西，那么它当然要容易得多。
Does that really work? There must be something that you haven''t told us (how
about a URL?), since a div element occupies the available width, so floating
cannot be applied.
If you set the widths, as you need to do in this approach, you evidently
need to set them in pixels, since the width of an image is in pixels. I''m
afraid there''s no working shortcut (except in the sense that the HTML markup
might be programmatically produced) - each div element needs to have its
width set. If the images share the same width and you want to keep things
that way, it''s of course much easier.
但是这（在我看来）
创建了很多重复的id =" img"等等。
However this (in my opinion)
creates a lot of redundant repetition of id="img", etc.
那是'不是很重要，真的，即使你使用正确的属性
名字，这个名字有点长（上课）。
但你真的不是如果你已经应用了系统的HTML
编码并且保持这种方式，则需要这些属性。你可以使用，比如说，
#lggcontainer div {
保证金：0 50px 0 50px;
float：left;
宽度：200px;
}
这里我假设所有图像都是200像素宽。
选择器#lrgcontainer div原则上指的是（id）直接或间接包含在id =" lrgcontainer"的元素中的任何div元素
。
这个实现你不应该使用包含图像及其标题的div
元素中的任何内部< divmarkup。
使用#lggcontainer div会更合乎逻辑，但它在浏览器支持方面有相当大的b $ b限制（阅读：IE到IE 6并没有理解它）。
-
Jukka K. Korpela（Yucca）
http://www.cs.tut.fi/~jkorpela/
That''s not very important, really, even when you use the correct attribute
name, which is somewhat longer (class).
But you don''t really need the attributes if you have applied systematic HTML
coding and will keep things that way. You can use, say,
#lrgcontainer div {
margin: 0 50px 0 50px;
float:left;
width: 200px;
}
Here I''ve assumed, for definiteness, that all images are 200 pixels wide.
The selector #lrgcontainer div refers, in principle, to any div element
contained (directly or indirectly) in an element with id="lrgcontainer".
This imples that you should not use any inner <divmarkup in the div
elements that contain an image and its caption.
Using #lrgcontainer div would be more logical, but it has considerable
limitations in browser support (read: IE up to IE 6 does not grok it).
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
2007年-01-15，Jukka K. Korpel a< jk ****** @ cs.tut.fiwrote：
[snip]
On 2007-01-15, Jukka K. Korpela <jk******@cs.tut.fiwrote:
[snip]
> #img {
保证金：0 50px 0 50px;
浮动：左;
}
>#img {
margin: 0 50px 0 50px;
float:left;
}
真的这样吗工作？必须有一些你没告诉我们的东西（关于一个URL怎么样？
），因为一个div元素占用了可用的宽度，所以浮动
不能被应用。
Does that really work? There must be something that you haven''t told us (how
about a URL?), since a div element occupies the available width, so floating
cannot be applied.
不，div元素占据其样式所占据的任何宽度。
div的默认值（显示：块和宽度） ：auto）的外部
边距宽度占据所有可用宽度。但浮动的宽度
宽度：auto（默认值）是CSS 2.1中的缩小到合适的宽度。
OP'的示例看起来它可以在大多数浏览器中使用，我认为OP不是抱怨它没有 - 只是它很麻烦。
[snip]
No, a div element occupies whatever width its styles tell it to occupy.
The default for a div (display: block and width: auto) is for its outer
margin width to occupy all the available width. But the width for floats
with width: auto (the default) is the shrink-to-fit width in CSS 2.1.
The OP''s example looks like it would work in most browsers, and I think
the OP wasn''t complaining it didn''t-- just that it was cumbersome.
[snip]
但是如果你已经应用了系统的HTML
编码，你就不需要这些属性了这样的事情。你可以使用，比如说，
#lggcontainer div {
保证金：0 50px 0 50px;
float：left;
宽度：200px;
}
这里我假设所有图像都是200像素宽。
But you don''t really need the attributes if you have applied systematic HTML
coding and will keep things that way. You can use, say,
#lrgcontainer div {
margin: 0 50px 0 50px;
float:left;
width: 200px;
}
Here I''ve assumed, for definiteness, that all images are 200 pixels wide.
没有必要在花车上设置宽度，见上文。图像可以是
，即使是不同的宽度，它都可以工作。
There''s no need to set width on the floats, see above. The images can be
even be different widths and it will all work.
这篇关于CSS图片库问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
