2列布局 [英] 2 column layout
问题描述
我为一个网站创建了一个好主意,现在我想在(x)html和css中翻译这个想法。
。布局非常基本:
标题,两列和一个页脚。有关图形演示,请参阅
http:// users。 telenet.be/sacn/tmp/layout.png 。
我想要:
*来源订购栏目:标题,内容,侧边栏,页脚
*固定宽度列(px或em单位)。因为我不喜欢
阅读非常长的行并且IE不支持最大/最大高度
属性。
*列不需要有自己的背景颜色或图像(没有
人造柱或等高柱)。
*固定高度标题(我将放置一个这里的背景图片)
*所有内容都在浏览器窗口中
*良好的浏览器支持:IE5 +,Gecko,Opera,......
我想用尽可能少的div',例如如下所示:
< div id =" container">
< div id =" header">< / div> ;
< div id =" main">
< div id =" content">< / div>
< div id =" sidebar">< / div>
< / div>
< div id =" footer"> < / div>
< / div>
我在互联网上搜索了一个合适的模板,但是
找不到一个。
这样的东西?
http://www.w3schools.com/css/tryit.a...=trycss_float6
--Adam
Jef Driesen写道:
我为一个网站创建了一个好主意,现在我想在(x)html和css中翻译这个想法
。布局非常基本:
标题,两列和一个页脚。有关图形演示,请参阅
http:// users。 telenet.be/sacn/tmp/layout.png 。
我想要:
*来源订购栏目:标题,内容,侧边栏,页脚
*固定宽度列(px或em单位)。因为我不喜欢
阅读非常长的行并且IE不支持最大/最大高度
属性。
*列不需要有自己的背景颜色或图像(没有
人造柱或等高柱)。
*固定高度标题(我将放置一个这里的背景图片)
*所有内容都在浏览器窗口中
*良好的浏览器支持:IE5 +,Gecko,Opera,......
我想用尽可能少的div',例如如下所示:
< div id =" container">
< div id =" header">< / div> ;
< div id =" main">
< div id =" content">< / div>
< div id =" sidebar">< / div>
< / div>
< div id =" footer"> < / div>
< / div>
我在互联网上搜索了一个合适的模板,但是
找不到一个。
2006-07-14, ak **** @ gmail.com 写道:
这样的东西?
http://www.w3schools.com/css/tryit.a...=trycss_float6
人们希望不会;它没有规模:
< http://cfaj.freeshell.org/www/2column.jpg>
- -
Chris FA Johnson,作者< http://cfaj.freeshell.org>
Shell Scripting Recipes:问题解决方案(2005,Apress)
=====我在这篇文章中的代码(如果有的话)假设POSIX语言环境
=====并且是根据GNU通用公共许可证发布的
ak****@gmail.com 写道:
这样的东西?
http://www.w3schools.com/css/tryit.a...=trycss_float6
不,这个没有源有序列,例如侧边栏在内容之前来了
。与此同时,我正在尝试使用浮动和负边距布局
。我会将结果上传到我的网站,
一旦我有大部分工作。
I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see
http://users.telenet.be/sacn/tmp/layout.png.
I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don''t like
reading very long lines and IE does not support the max/max-height
properties.
* columns don''t need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...
I want to use as few div''s as possible, e.g. something like below:
<div id="container">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
I did search on the internet for a suitable template to start with, but
couldn''t find one.
Something like this?
http://www.w3schools.com/css/tryit.a...=trycss_float6
--Adam
Jef Driesen wrote:I have created a nice idea for a website and now I would like to
translate that idea in (x)html and css. The layout is quite basic: a
header, two columns and a footer. For a graphical presentation, see
http://users.telenet.be/sacn/tmp/layout.png.
I would like to have:
* source ordered columns: header, content, sidebar, footer
* fixed width columns (either px or em units). Because I don''t like
reading very long lines and IE does not support the max/max-height
properties.
* columns don''t need to have their own background color or image (no
faux columns or equal-height colums necessary).
* fixed height header (I will place a background image here)
* everything centered in the browser window
* good browser support: IE5+, Gecko, Opera,...
I want to use as few div''s as possible, e.g. something like below:
<div id="container">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
I did search on the internet for a suitable template to start with, but
couldn''t find one.
On 2006-07-14, ak****@gmail.com wrote:Something like this?
http://www.w3schools.com/css/tryit.a...=trycss_float6One would hope not; it doesn''t scale:
<http://cfaj.freeshell.org/www/2column.jpg>
--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence
ak****@gmail.com wrote:Something like this?
http://www.w3schools.com/css/tryit.a...=trycss_float6No, this one has no source ordered columns, e.g. the sidebar comes
before the content. In the meantime I am experimenting with a layout
using floats and negative margins. I''ll upload the result to my website,
once I have most parts working.
这篇关于2列布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!