如何使用第二列自动伸展进行css 2列布局以获得最大页面数。 1024 x768分辨率? [英] How to do a css 2-column layout with 2nd column autostretch for page max. of 1024 x768 resolution?

查看:43
本文介绍了如何使用第二列自动伸展进行css 2列布局以获得最大页面数。 1024 x768分辨率?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你如何使用页眉和页脚进行css 2列布局,使用第二个



自动拉伸使整个页面看起来很适合800 x 600分辨率最小值

和最大1024 x 768分辨率?

理想情况下,布局会居中,以便在视觉上更好地扩展。


这对我来说很棒。


谢谢,

Dan V.

解决方案

" Dan V." < d@d.com>写道:

如何使用页眉和页脚进行css 2列布局,第2页
列自动拉伸


使用css表(IE不支持)。


替代方法很少见,谷歌用于fauxcolumns对于黑客来说,

适用于固定像素宽度的列。 (如果列

包含文本,则不适用。)

我知道的唯一其他IE兼容方法需要踢IE6

进入怪癖模式。

800 x 600分辨率为min。


没有这样的东西,800x600是常见的屏幕区域大小,屏幕分辨率

是以每英寸像素数表示的像素粒度。

理想情况下,布局会居中,以便在视觉上更好地扩展。




布局应该适应可用的视口宽度,很少是它

适合尝试防止这种情况发生,使用max-width来支付那些罕见的情况。


-

comp.infosystems中的Spartanicus


www.authoring .stylesheets ,Spartanicus写道:

Dan V. < d@d.com>写道:

你如何使用页眉和页脚进行css 2列布局,第2页
列自动拉伸
使用css表(不是IE支持。

替代方法很少见,谷歌用于fauxcolumns。一个黑客




这不是很聪明,恕我直言。

我知道的唯一其他IE兼容方法需要踢IE6进入怪癖模式。


这并不难。改变了我的旧例子:
http://www.student.oulu.fi/~laurirai...float2col.html


这个例子已存在多年,我只添加了页脚和删除

宽度。


它可以做得更简单,这很复杂,因为它回答

来质疑如何获得列之间的边界,它可以在IE5中运行...

(无论是哪种要求,都是非常干净的解决方案,但确实需要

一个额外的元素,或者一些技巧。)

理想情况下,布局将居中,以便在视觉上更好地扩展。




恕我直言,这不是个好主意。

布局应该适应可用的视口宽度,很少适合尝试防止这种情况发生,请使用max-width
那些罕见的情况s。




并且仅将max-width用于真正受益于它的东西。喜欢

段落。添加你使用比你认为最好的更大的价值,因为

是人与人之间的差异,并且没有证据表明短栏

更容易阅读,当差异很大。 (关于

主题的研究在互联网的某个地方,我想我至少看过2个。)


-

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

乌得勒支,NL。


这在IE 6和Firefox 1.0 - 我使用

进行大部分测试,因为他们有很大的市场份额。

我有点忘了IE 5,因为我是新手,我想要

任何黑客之前要了解基础知识。


如果我使用此代码(谢谢)我怎样才能获得第二个内容

''列''拉伸只说700 px max。 (最大宽度是我知道的唯一方式 - 但我不知道有多少浏览器支持这个div。)

部分内容如果它延伸超过1024 x 768

分辨率,它们看起来会很傻。


我想我可以假设人们不会选择愚蠢的宽度。 。?


" Lauri Raittila" < LA *** @ raittila.cjb.net>在留言中写道

新闻:MP ************************ @ news.individual.ne t ...

。{rel=\"nofollow\" href=\"http://www.authoring.stylesheets\" target=\"_blank\"> www.authoring.stylesheets ,Spartanicus写道:

Dan V. < d@d.com>写道:

如何使用页眉和页脚进行css 2列布局,使用
2ndcolumn自动拉伸



通过使用css表(IE不支持)。

替代方法很少见,谷歌用于fauxcolumns。对于黑客攻击



这不是很聪明,恕我直言。

我知道的唯一其他IE兼容方法需要踢IE6
进入怪癖模式。



这并不难。改变了我的旧例子:
http://www.student.oulu.fi/~laurirai...float2col.html

这个例子已存在多年了,我只添加了页脚并删除了
宽度。

它可以做得更简单,这很复杂,因为它回答问题如何获取列之间的边界,它在IE5中工作...
(无论哪种要求,它都是非常干净的解决方案,但确实需要一个额外的元素或一些技巧。)

理想情况下布局将居中,以便在视觉上更好地扩展。



恕我直言,这不是个好主意。

布局应该适应可用的视口宽度,很少适合尝试并防止发生这种情况,使用max-width来处理那些罕见的情况。

并且仅将max-width用于真正受益于它的东西。喜欢
段落。添加你使用比你认为最好的更大的价值,因为
是人与人之间的差异,并且没有证据表明,当差异巨大时,短列更容易阅读。 (在互联网的某处有关于
主题的研究,我想我至少看过2个。)

-
Lauri Raittila< http://www.iki。 FI / LR> < http://www.iki.fi/zwak/fonts>
荷兰乌得勒支。



How do you do a css 2 column layout with header and footer, with the 2nd
column
auto-stretching so entire page looks good for 800 x 600 resolution as min.
and 1024 x 768 resolution as a max?

Ideally the layout would be centered so it scales better visually.

This would be great for me.

Thanks,
Dan V.

解决方案

"Dan V." <d@d.com> wrote:

How do you do a css 2 column layout with header and footer, with the 2nd
column auto-stretching
By using a css table (not supported by IE).

Alternative methods are rare, Google for "fauxcolumns" for a hack
suitable for a fixed pixel width "column" (not suitable if the column
contains text).

The only other IE compatible method I''m aware of requires kicking IE6
into quirks mode.
800 x 600 resolution as min.
No such thing, 800x600 is a common Screen Area size, screen resolution
is the granularity of the pixels expressed as Pixels Per Inch.
Ideally the layout would be centered so it scales better visually.



Layouts should adapt to the available viewport width, rarely is it
appropriate to try and prevent that from happening, use max-width for
those rare cases.

--
Spartanicus


in comp.infosystems.www.authoring.stylesheets, Spartanicus wrote:

"Dan V." <d@d.com> wrote:

How do you do a css 2 column layout with header and footer, with the 2nd
column auto-stretching
By using a css table (not supported by IE).

Alternative methods are rare, Google for "fauxcolumns" for a hack



That is not very clever, IMHO.
The only other IE compatible method I''m aware of requires kicking IE6
into quirks mode.
It is not that hard. Changed my old example little:
http://www.student.oulu.fi/~laurirai...float2col.html

That example has been there for ages, I only added footer and removed
width.

It can be done much simpler, this is complicated one, because it answers
to question how to get border between columns, and it works in IE5...
(whiout either requirement, it is quite clean solution, but does require
one extra element, or some tricks.)

Ideally the layout would be centered so it scales better visually.



IMHO, that is not good idea.
Layouts should adapt to the available viewport width, rarely is it
appropriate to try and prevent that from happening, use max-width for
those rare cases.



And use max-width only for stuff that really benefit from it. Like
paragraphs. Add you use bigger value than you think it is best, as there
is differences between people, and there is no proof that short column
are easier to read, when difference is huge. (there is studies about
subject somewhere in internet, I think I have seen 2 at least.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.


This looks good in IE 6 and Firefox 1.0 - which I do most of my testing with
as they have a lot of market share.
I kind of forget about IE 5 as I am new and I want to know the basics before
any hacks.

If I use this code (with thanks) how can I have the content in the 2nd
''column'' stretch only to say 700 px max. (Max-width is the only way that I
am aware - but I don''t know how many browsers support this for a div.)
Some of the content will look ''silly'' if it stretches past 1024 x 768
resolution.

I guess I could assume people won''t choose silly widths..?

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Spartanicus wrote:

"Dan V." <d@d.com> wrote:

How do you do a css 2 column layout with header and footer, with the 2ndcolumn auto-stretching



By using a css table (not supported by IE).

Alternative methods are rare, Google for "fauxcolumns" for a hack



That is not very clever, IMHO.

The only other IE compatible method I''m aware of requires kicking IE6
into quirks mode.



It is not that hard. Changed my old example little:
http://www.student.oulu.fi/~laurirai...float2col.html

That example has been there for ages, I only added footer and removed
width.

It can be done much simpler, this is complicated one, because it answers
to question how to get border between columns, and it works in IE5...
(whiout either requirement, it is quite clean solution, but does require
one extra element, or some tricks.)

Ideally the layout would be centered so it scales better visually.



IMHO, that is not good idea.

Layouts should adapt to the available viewport width, rarely is it
appropriate to try and prevent that from happening, use max-width for
those rare cases.



And use max-width only for stuff that really benefit from it. Like
paragraphs. Add you use bigger value than you think it is best, as there
is differences between people, and there is no proof that short column
are easier to read, when difference is huge. (there is studies about
subject somewhere in internet, I think I have seen 2 at least.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.



这篇关于如何使用第二列自动伸展进行css 2列布局以获得最大页面数。 1024 x768分辨率?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆