什么是最好的方法？ [英] What's the best approach?
问题描述
大家好，
我想创建一个布局，顶部有一个标题，下面有两列，
，左边是一个菜单，并且右边包含页面的主要内容
。我希望标题部分和它的内容一样高，左边的
和它的内容一样宽，并且有权填充剩下的部分
屏幕。如果可能的话，我不想在任何地方使用px尺寸，甚至百分比
也可以避免菜单和内容部分。
我无法找到使用绝对和相对的定位的合适解释，所以
很难理解为什么当我使用某些
组合时，事情会出现在他们所处的位置。位置的使用/术语似乎没有那么简单
直观。
理想情况下，我只想指定三个部分，然后将
中的内容如下所示，但我认为它不起作用，因为浏览器无法计算出多大的数量
或左右位的位置关于已经摆在他们面前的比特，就像之前的比特还没有存在一样。所以他们最终只会重叠
。
#heading {
宽度：100％< ---这是如此我可以直接穿过底部边框
}
#menu {
身高：100％; < ---这是我可以得到一个右边框到底页。
}
#content {
}
< div id = heading>
< h1> heading< / h1>
< / div> ;
< div id = menu>
< a href = home.html> home< / a>< br>
< a href = links.html>链接< / a>< br>
< a href = about.html>关于我们< / a>
< ; / div>
< div id = content>
< h2>子标题< / h2>< br>
< p>欢迎来到我们的主页，网站...< / p>
< / div>
不幸的是，东西只是重叠，如果我对每个
部分使用position：relative，它们只是一个接一个地出现在页面上。
一个站点建议创建两个" ;行'，然后是顶行的一个内容div
和第二行的两个内容div。他们还为所有人指定了
宽度列，但我想避免这种情况。为什么这样？有事可做
毫无疑问的定位。
感谢您提供任何帮助或链接到好网站。我试过ALA和glish。
-
Ben Thomas
显然不到10％事故是由超过车速的车手引起的。
$ div $ = h2_lin>解决方案
BenOne？写道：
我想创建一个布局，顶部有一个标题，下面有两列，
左边是菜单，右边是主要内容
页面。我希望标题部分和它的内容一样高，左边和它的内容一样宽，并且有权填充剩下的部分
屏幕。如果可能的话，我不想在任何地方使用px尺寸，甚至百分比
也可以避免菜单和内容部分。
相当简单。
#heading {
宽度：100％< ---这是我可以让右下边缘向右跨越
}
不必要，作为块级元素，例如< div>和< h1>占用所有
的可用宽度除非你写css否则建议。
#menu {
高度：100％; < ---这是我可以得到一个正确的边框到页面底部。
}
似乎没问题，但请注意各种版本的IE / Win需要不同事情
完成应该是一项简单的任务。 :(
< div id = heading>
< h1> heading< / h1>
< / div>
< div id = menu>
< a href = home.html> home< / a>< br>
< a href = links.html> links< / a>< br>
< a href = about.html> about us< / a>
< / div>
< div id = content>
< h2>子标题< / h2>< br>
< p>欢迎来到我们的主页，该网站...< / p>
< / div>
定义一个div＃menu的宽度，以em为单位，因此它可以正确缩放，并且
浮动它。
如果我使用position：relative为每个部分
正如David Dorward在另一个帖子中所说的那样：如果你没有b $ b必须这样做，你就不会有位置。你可以使用html，你不需要定位。
一个站点建议创建两个行，然后创建一行内容div为顶行
和两个内容div为第二行。他们还指定colu mn
宽度适合所有人，但我想避免这种情况。为什么这样？
你的问题的表格布局似乎完全不必要，这是真的。
毫无疑问与定位有关。
不，漂浮就是这样。非常简单。
-
Brian（从我的地址中删除无效给我发电子邮件）
http://www.tsmchughs.com/
BenOne ？写道：
我想创建一个布局，顶部有一个标题，下面有两列，
左边是菜单，右边是主要内容
页面。我希望标题部分和它的内容一样高，左边和它的内容一样宽，并且有权填充剩下的部分
屏幕。如果可能的话，我不想在任何地方使用px尺寸，甚至百分比
也可以避免菜单和内容部分。
相当简单。
#heading {
宽度：100％< ---这是我可以让右下边缘向右跨越
}
不必要，作为块级元素，例如< div>和< h1>占用所有
的可用宽度除非你写css否则建议。
#menu {
高度：100％; < ---这是我可以得到一个正确的边框到页面底部。
}
似乎没问题，但请注意各种版本的IE / Win需要不同事情
完成应该是一项简单的任务。 :(
< div id = heading>
< h1> heading< / h1>
< / div>
< div id = menu>
< a href = home.html> home< / a>< br>
< a href = links.html> links< / a>< br>
< a href = about.html> about us< / a>
< / div>
< div id = content>
< h2>子标题< / h2>< br>
< p>欢迎来到我们的主页，该网站...< / p>
< / div>
定义一个div＃menu的宽度，以em为单位，因此它可以正确缩放，并且
浮动它。
如果我使用position：relative为每个部分
正如David Dorward在另一个帖子中所说的那样：如果你没有b $ b必须这样做，你就不会有位置。你可以使用html，你不需要定位。
一个站点建议创建两个行，然后创建一行内容div为顶行
和两个内容div为第二行。他们还指定colu mn
宽度适合所有人，但我想避免这种情况。为什么这样？
你的问题的表格布局似乎完全不必要，这是真的。
毫无疑问与定位有关。
不，漂浮就是这样。非常简单。
-
Brian（从我的地址中删除无效给我发电子邮件）
http://www.tsmchughs.com/
" BenOne？" <无** @ m.thanks.mate>在消息中写道
news：或*********** @ 192.168.11.2 ...大家好，
我想创建一个布局，顶部有一个标题，
下面有两列，左边是菜单，右边是页面的主要内容
。我希望标题部分和它的内容一样高，
留下的内容和它的内容一样宽，并且有权填充剩下的部分
屏幕。如果可能的话，我不想在任何地方使用px尺寸，甚至
百分比也可以避免菜单和内容部分。
你好，
http://nemesis1.f2o.org/templates .php
这里有一些很好的布局示例。谷歌搜索CSS布局
将产生大量结果。
问候，
Jim Roberts
Hi all,
I want to create a layout with a heading at the top and two columns below it,
with the left containing a menu, and the right containing the main content of
the page. I''d like the heading section to be as tall as it''s content, the left
to be as wide as it''s content, and the right to just fill the rest of the
screen. I don''t want to use px sizes anywhere if possible, and even percentages
would be nice to avoid for the menu and content sections.
I can''t find a decent explanation of positioning using absolute and relative, so
it''s hard to understand why things appear where they do when I use certain
combinations. The use/terminology for position does not seem the least bit
intuitive.
Ideally I''d just like to specify the three sections and then put the content in
as below, but I think it doesn''t work because the browser can''t work out how big
or where to put the left and right bits in relation to the bits that have been
placed before them like the previous bits don''t even exist yet. So they end up
simply overlapping.
#heading {
width: 100% <--- this is so I can get a bottom border going right across
}
#menu {
height: 100%; <--- this is so I can get a right border going to page bottom.
}
#content {
}
<div id=heading>
<h1>heading</h1>
</div>
<div id=menu>
<a href=home.html>home</a><br>
<a href=links.html>links</a><br>
<a href=about.html>about us</a>
</div>
<div id=content>
<h2>sub-heading</h2><br>
<p>Welcome to our home page, THE site for...</p>
</div>
Unfortunately stuffs just overlaps, and if I use position: relative for each
section, they just appear one after the other going down the page.
One site recommends creating two "rows", then one content div for the top row
and two content divs for the second row. They also also specify the column
widths for all, but I''d like to avoid that. Why do it that way? Something to do
with positioning no doubt.
Thanks for any help or links to good sites. I''ve tried ALA and glish.
--
Ben Thomas
Apparently less than 10% of accidents are caused by drivers exceeding the speed
limit.
BenOne? wrote:
I want to create a layout with a heading at the top and two columns below it,
with the left containing a menu, and the right containing the main content of
the page. I''d like the heading section to be as tall as it''s content, the left
to be as wide as it''s content, and the right to just fill the rest of the
screen. I don''t want to use px sizes anywhere if possible, and even percentages
would be nice to avoid for the menu and content sections.
Fairly straightforward.
#heading {
width: 100% <--- this is so I can get a bottom border going right across
}
Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.
#menu {
height: 100%; <--- this is so I can get a right border going to page bottom.
}
Seems ok, but note that various versions of IE/Win need different things
to accomplish what should be a simple task. :(
<div id=heading>
<h1>heading</h1>
</div>
<div id=menu>
<a href=home.html>home</a><br>
<a href=links.html>links</a><br>
<a href=about.html>about us</a>
</div>
<div id=content>
<h2>sub-heading</h2><br>
<p>Welcome to our home page, THE site for...</p>
</div>
Define a width for div#menu, in em units so it scales properly, and
float it left.
if I use position: relative for each section
As David Dorward stated in another thread: don''t position if you don''t
have to. With the html as you have it, you shouldn''t need positioning.
One site recommends creating two "rows", then one content div for the top row
and two content divs for the second row. They also also specify the column
widths for all, but I''d like to avoid that. Why do it that way?
Table layout for your problem seems entirely unecessary, it''s true.
Something to do with positioning no doubt.
No, float is the way. Very simple.
--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
BenOne? wrote:
I want to create a layout with a heading at the top and two columns below it,
with the left containing a menu, and the right containing the main content of
the page. I''d like the heading section to be as tall as it''s content, the left
to be as wide as it''s content, and the right to just fill the rest of the
screen. I don''t want to use px sizes anywhere if possible, and even percentages
would be nice to avoid for the menu and content sections.
Fairly straightforward.
#heading {
width: 100% <--- this is so I can get a bottom border going right across
}
Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.
#menu {
height: 100%; <--- this is so I can get a right border going to page bottom.
}
Seems ok, but note that various versions of IE/Win need different things
to accomplish what should be a simple task. :(
<div id=heading>
<h1>heading</h1>
</div>
<div id=menu>
<a href=home.html>home</a><br>
<a href=links.html>links</a><br>
<a href=about.html>about us</a>
</div>
<div id=content>
<h2>sub-heading</h2><br>
<p>Welcome to our home page, THE site for...</p>
</div>
Define a width for div#menu, in em units so it scales properly, and
float it left.
if I use position: relative for each section
As David Dorward stated in another thread: don''t position if you don''t
have to. With the html as you have it, you shouldn''t need positioning.
One site recommends creating two "rows", then one content div for the top row
and two content divs for the second row. They also also specify the column
widths for all, but I''d like to avoid that. Why do it that way?
Table layout for your problem seems entirely unecessary, it''s true.
Something to do with positioning no doubt.
No, float is the way. Very simple.
--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
"BenOne?" <no**@m.thanks.mate> wrote in message
news:or***********@192.168.11.2...Hi all,
I want to create a layout with a heading at the top and two columns below it, with the left containing a menu, and the right containing the main content of the page. I''d like the heading section to be as tall as it''s content, the left to be as wide as it''s content, and the right to just fill the rest of the
screen. I don''t want to use px sizes anywhere if possible, and even percentages would be nice to avoid for the menu and content sections.
Hello,
http://nemesis1.f2o.org/templates.php
Some good layout examples can be found here. A google search for CSS layouts
will yield lots of results.
Regards,
Jim Roberts
这篇关于什么是最好的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
