纯粹使用CSS模拟表格布局 [英] Emulating a table layout purely using CSS

问题描述

早上好，


我正在设计一个网站，使用CSS，并希望创建一个变量

宽度的两列布局，页眉和页脚，以及一个固定宽度的列

左边。


以前，我会使用表来执行此操作，使用以下内容代码：

< table width =" 100％">

< tr>

< td colspan =" 2">标题< / td>

< / tr>

< tr>

< td width =" 160" ;>导航< / td>

< td>正文< / td>

< / tr>

< tr>

< td colspan =" 2"> Footer< / td>

< / tr>

< / table>

现在我正在使用CSS，我不想这样做，所以想出了一个

设计。我很不高兴我不能在

内容之后进行导航（虽然我被告知这是一个常见的事情，我应该使用

Skip Nav按钮）但并非一切正常 - 我必须使用脚本

使导航DIV与内容DIV的高度相同（是否有一个

如何使用CSS来完成这项工作？）


我正在考虑使用脚本来设置宽度，但是想看看是否这个

可以让纯粹使用CSS工作（毕竟，如果我必须用脚本来补充它，那么

样式表有什么意义？）


非常感谢任何帮助，你可以查看以下工作：

http://dev.listersgroup.com/listers.group/listers.aspx


非常感谢，

Anthony Williams

Good morning,

I''m currently designing a site, using CSS, and wish to create a variable
width two-column layout, with header and footer, and one fixed-width column
on the left.

Previously, I would have used a table to do this, using the following code:
<table width="100%">
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td width="160">Navigation</td>
<td>Body</td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>
Now I''m using CSS, I don''t want to have to do this, so have come up with a
design. I''m a little peeved that I can''t put the navigation AFTER the
content (though I''m told this is a common occurance, and I should use a
"Skip Nav" button) but not everything is working - I''ve had to use scripting
to make the Navigation DIV the same height as the Content DIV (is there a
way to make this work using CSS?)

I was considering using scripting to set the width, but want to see if this
can be made to work purely using CSS (after all, what''s the point of the
stylesheet if I have to complement it with scripting?)

Any help would be greatly appreciated, and you can check out the work at:

http://dev.listersgroup.com/listers.group/listers.aspx

Many thanks,
Anthony Williams

推荐答案

2004年2月3日星期二12:12:37 +0000（UTC），Anthony Williams

< to ** @ bigtone.withoutthis.net>写道：

On Tue, 3 Feb 2004 12:12:37 +0000 (UTC), Anthony Williams
<to**@bigtone.withoutthis.net> wrote:

我很不高兴，我不能把导航后的内容搞定
内容


当然你能够。查看我的 http://users.rcn.com/neal413 完成

类似的东西。


您可以选择正确浮动内容，导航将结束。

当然，你想要设置导航宽度，对吧？如果你能够，让那个

可以调整，比如宽度的百分比，或者使用像我这样的像素宽度布局，那么你可以控制它。

（虽然我被告知这是一个常见的事情，我应该使用
Skip Nav按钮）但不是一切都正常 - 我已经必须使用
脚本
使导航DIV与内容DIV的高度相同（是否有使用CSS实现此功能的方法？）

I''m a little peeved that I can''t put the navigation AFTER the
content
Sure you can. Peek at http://users.rcn.com/neal413 where I''ve done
something similar.

You can choose to float the content right and the nav will end up left. Of
course, you want the nav width to be set, right? If you''re able, let that
be adjustible, say as a % of the width, or use a pixel-width layout like I
did, then you can control it.
(though I''m told this is a common occurance, and I should use a
"Skip Nav" button) but not everything is working - I''ve had to use
scripting
to make the Navigation DIV the same height as the Content DIV (is there a
way to make this work using CSS?)

为什么每个人都想要一个friggin''赛车条纹？我的意思是，功能上，

箱子1和箱子2的高度是否相同？在CSS中，它不是

始终可以对盒子的高度施加控制，内容

决定了这一点。


请记住，表格布局是网格模型，CSS是框模型。 （对于那些即将争辩的人来说，是的，是的，是的......）尝试模仿这是错误的。用CSS表格

布局。这就像将一首诗翻译成另一种语言一样，你需要重新思考每一个想法，你必须让它变得不同但是相等。

那就是译者的原因诗歌是如此罕见，为什么网页设计如此频繁？b $ b很糟糕。


我知道有办法做到这一点，我还没有还有半杯咖啡，所以

我会把它留给以后。但我确定有一个可靠的解决方案。

Why does everyone want a friggin'' racing stripe? I mean, functionally,
does it matter that Box 1 and Box 2 are the same height? In CSS, it''s not
always possible to exert control over the height of a box, the content
determines that.

Remember, table layout is a grid model, and CSS is a box model. (For those
about to argue, yeah, yeah...) It''s a mistake to try to "emulate" a table
layout with CSS. It''s like translating a poem to another language, you
have to recast every thought, you have to make it different but equal.
That''s why translators of poetry are so rare, and why web design so often
sucks.

I know there''s a way to do this, I haven''t had half a cup of coffee yet so
I''ll leave it for later. But I''m sure there''s a solid solution.

" Anthony Williams" <至** @ bigtone.withoutthis.net>在消息中写道

新闻：bv ********** @ titan.btinternet.com ...

"Anthony Williams" <to**@bigtone.withoutthis.net> wrote in message
news:bv**********@titan.btinternet.com...

现在我正在使用CSS，我我们不想这样做，所以想出了一个设计。我很不高兴，因为我不能把导航放在
内容之后（尽管我被告知这是一个常见的事情，我应该使用一个
Skip Nav按钮）但并非一切正常 - 我必须使用
脚本来使导航DIV与内容DIV的高度相同（是否有使用CSS实现此功能的方法？）

Now I''m using CSS, I don''t want to have to do this, so have come up with a
design. I''m a little peeved that I can''t put the navigation AFTER the
content (though I''m told this is a common occurance, and I should use a
"Skip Nav" button) but not everything is working - I''ve had to use scripting to make the Navigation DIV the same height as the Content DIV (is there a
way to make this work using CSS?)

您当然可以将导航放在内容之后。我会保留关于Skip Nav的

评论。对自己胡言乱语。我没有可用于发布的

工作示例，但请查看：
www.csszengarden.com

有些设计可以满足您的需求。


希望这会有所帮助。

问候，

Peter Foti

You certainly CAN put the navigation after the content. And I''ll keep my
comments regarding the "Skip Nav" gibberish to myself. I don''t have a
working example available to post, but check out:
www.csszengarden.com
Some of the designs do just what you are looking for.

Hope this helps.
Regards,
Peter Foti

Quoth the raven名为Anthony Williams：

Quoth the raven named Anthony Williams:

我正在使用CSS设计一个网站，并且希望创建一个可变宽度的两列布局，页眉和页脚，以及左侧的一个
固定宽度列。


借用一个brucieism：容易peasy。

以前，我会用一个表来执行此操作，使用
以下代码：


< schnip表格代码>

现在我正在使用CSS，我不想这样做，所以出现了<有设计的。我很不高兴我不能把导航
放在内容之后（虽然我被告知这是一个常见的事情，而且我应该使用Skip Nav按钮）但并非一切正常 -
我不得不使用脚本来使导航DIV与内容DIV一样高度（有没有办法使用
CSS来完成这项工作？）


请不要生气。 < g取代;这只是一个定位问题。请参阅

我之前为朋友制作的这个小模板。请注意

源中的菜单位于

HTML逻辑顺序中的内容之后。在使用非CSS浏览器时，还有一个隐藏的显示：无 - 链接在内容

之上进入菜单。

http://home.rochester.rr.com/bshagnasty/twocolumn.html

我正在考虑使用脚本来设置宽度，但是想看看
是否可以纯粹使用CSS（毕竟，这是什么？样式表，如果我必须用脚本来补充它？）

I''m currently designing a site, using CSS, and wish to create a
variable width two-column layout, with header and footer, and one
fixed-width column on the left.
To borrow a brucieism: easy peasy.
Previously, I would have used a table to do this, using the
following code:
<schnip table code>
Now I''m using CSS, I don''t want to have to do this, so have come up
with a design. I''m a little peeved that I can''t put the navigation
AFTER the content (though I''m told this is a common occurance, and
I should use a "Skip Nav" button) but not everything is working -
I''ve had to use scripting to make the Navigation DIV the same
height as the Content DIV (is there a way to make this work using
CSS?)
Please don''t get peeved. <g> It is simply a matter of positioning. See
this little template I made for a friend awhile ago. Notice in the
source that the menu is after the content in the logical order of the
HTML. There is also a hidden - display: none - link above the content
to go to the menu when using a non-CSS browser.

http://home.rochester.rr.com/bshagnasty/twocolumn.html
I was considering using scripting to set the width, but want to see
if this can be made to work purely using CSS (after all, what''s the
point of the stylesheet if I have to complement it with scripting?)

不需要脚本。


-

-bts

-这个空间故意留空。

No scripting required.

--
-bts
-This space intentionally left blank.

这篇关于纯粹使用CSS模拟表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！