3列液体布局？ （用于缩略图） [英] 3-column liquid layout? (for thumbnails)
问题描述
http://phazm.net/csstest/index2.html
我正在尝试使缩略图适合页面的宽度，所以
每行有3-4个，但是当你调整大小，我希望它基本上与页面一起流动，并且我有点难以确定
out。
我希望代码保持合理性：
< ul>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< / ul>
等等。
任何人都有任何想法吗？
我读过这个， http://www.alistapart.com/articles/multicolumnlists
但我真的不可能这对我有用。
真的在这里寻求帮助，
谢谢，
- Jon
http://phazm.net/csstest/index2.html
I''m trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I''m having a bit of a hard time figuring that
out.
I want the code to remain logical:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and so on.
Anyone have any ideas?
I''ve read this,
http://www.alistapart.com/articles/multicolumnlists
but I can''t really make it work for me.
Really lookin for some help here,
thanks,
- Jon
推荐答案
FuzzyLogik写道：
FuzzyLogik wrote:
http://phazm.net/csstest/index2.html
我正在尝试使缩略图适合页面的宽度，所以
每行有3-4个，但是当你调整大小时，我希望它基本上和页面上的
一起流动，而且我有点难以确定
out。
我希望代码保持合理：
< ul>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< / ul>
等等。
任何人ave任何想法？
我读过这个，
http://www.alistapart.com/articles/multicolumnlists
但我真的不能让它对我有用。
真的在这里寻求帮助，
谢谢，
- Jon
http://phazm.net/csstest/index2.html
I''m trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I''m having a bit of a hard time figuring that
out.
I want the code to remain logical:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and so on.
Anyone have any ideas?
I''ve read this,
http://www.alistapart.com/articles/multicolumnlists
but I can''t really make it work for me.
Really lookin for some help here,
thanks,
- Jon
我遇到的问题是在缩略图下获取文本，并且
居中。另外，连续3张缩略图，我无法理解。
The problem I''m having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can''t figure that out.
2006-10-28，FuzzyLogik< ta ** **@gmail.com写的：
On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
http ：//phazm.net/csstest/index2.html
我正在尝试使缩略图适合页面的宽度，所以
每行有3-4个，但是当你调整大小时，我希望它基本上与页面一起流动，并且我有点困难。
out。
我希望代码保持合理性：
< ul>
< li> < / li>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< li>< / li>
< / ul>
等等。
任何人都有任何想法？
http://phazm.net/csstest/index2.html
I''m trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I''m having a bit of a hard time figuring that
out.
I want the code to remain logical:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and so on.
Anyone have any ideas?
我认为最好的方法可能是浮动那些< li> s。
I think the best approach is likely to be to float those <li>s.
我读过这篇文章，
http://www.alistapart.com / articles / multicolumnlists
但我真的不能让它适合我。
I''ve read this,
http://www.alistapart.com/articles/multicolumnlists
but I can''t really make it work for me.
他们确实提到了花车，但拒绝了这个想法，因为列表项
编号不在列中。但是你的缩略图没有编号，所以
无关紧要。
如果你确实漂浮了< li> s你会发现他们跳下了页面上的
。这是因为它们在一个自动宽度的容器中，它也是浮动的另一个浮动的右侧。所以他们把那个容器填满
直到完整的包含宽度，最后跳下去清除
第一次漂浮到有更多空间的地方。所以
的第一件事就是设置div＃content的宽度。
They did mention floats, but rejected the idea because list item
numbering doesn''t go in columns. But your thumbnails aren''t numbered, so
that doesn''t matter.
If you do float the <li>s the first thing you''ll find is they jump down
the page. This is because they''re in an auto-width container that''s also
floated and to the right of another float. So they fill that container
up to the full containing width, which ends up jumping down to clear the
first float to somewhere where there''s more space. So the first thing to
do is to set a width on div#content.
FuzzyLogik写道：
FuzzyLogik wrote:
FuzzyLogik写道：
FuzzyLogik wrote:
> http://phazm.net/csstest/index2.html
我正在尝试使缩略图适合页面的宽度，
>http://phazm.net/csstest/index2.html
I''m trying to make the thumbnails fit to the width of the page,
我遇到的问题是在缩略图下获取文本，并且
居中。另外，连续获得3个缩略图，我无法确定
out。
The problem I''m having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can''t figure that
out.
..thumbs li {display：inline; text-align：center; }
并在HTML中的图像和标题之间放置一个< br。
-
-bts
-Motorcycles无视重力;汽车只是吮吸
..thumbs li {display: inline; text-align: center; }
and place a <brbetween the image and the caption in the HTML.
--
-bts
-Motorcycles defy gravity; cars just suck
这篇关于3列液体布局？ （用于缩略图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
