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屋！
