三栏帮助初学者！ [英] Three column help for a beginner!

问题描述

嗨


我正在尝试使用html和外部样式表设计一个简单的三栏网站。


我有一个750px宽的标题，下面的导航栏宽度相同，都是居中的。


现在我想在下面放三列（左右150px宽;中间适合剩余空间） ，与标题/导航栏的左右边缘对齐。在底部，我想在右侧添加一个页脚以匹配导航栏。


我刚刚意识到我不能轻易地将左右列放在页面，因为我不知道观众的屏幕有多大，所以不能说边距应该是多少。


必须有一种衬里的方式一切都好了。


有什么建议吗？


Ta。

解决方案

I将这个帖子移到HTML论坛。


应该有一些变量可以让你访问当前的屏幕宽度/高度。使用它，你可以说1列将占据宽度的33％，因此将它们定位在宽度的0％，宽度的33％和宽度的66％以获得均匀的间距。从那里，您可以调整以查看看起来不错的东西。


网站将根据访问者访问当前屏幕，因此它将占用一定比例的空间。 / blockquote>

你有编写的代码吗？我们通常不会为人们写那么多代码这里是如果您有兴趣学习HTML，请链接。


Aric

你有没有代码写的？我们通常不会为人们写那么多代码这里是如果您有兴趣学习HTML，请链接。


Aric

是的，我已经开始编写代码但是我想在做太多之前我需要知道制作布局的最佳方法。我不希望任何人为我编写代码 - 只需指出正确的方向。


我想我想要的东西会显示或多或少全屏800宽显示器，并且将在更大的显示器上显示相同的宽度但左右边距更大。


保持内容（尽管可能不是标题）在较小的窗口中显示OK ，我打算让中间列灵活的尺寸（我估计使用100％）来填补可用空隙，并且左右列固定宽度。我要坚持的是如何定位L和R列。


我读到了关于容器的信息。在css样式表中但还没有找到涵盖我想知道的内容的教程。我猜测它可以制作一个居中的750px宽的容器并将所有其他元素粘在其中，保持它排列整齐。无论如何，这就是我所希望的！


找出屏幕尺寸并从那里开始处理百分比的想法听起来很棒 - 我可以放一段代码在找到这个？但如果有人在桌面上打开一个小窗口，它会起作用吗？


干杯


Genny

Hi

I''m trying to design a simple three-column website using html and an external stylesheet.

I have a header of 750px wide, navbar underneath is the same width, both centred.

Now I want to put three columns underneath (left and right 150px wide; middle to fit the remaining space), lined up with the left and right edges of the header/navbar. At the bottom, I want to add a footer right across to match the navbar.

I''ve just realised that I can''t easily position the left and right columns on the page because I don''t know how big the viewer''s screen will be, so can''t say what margin size should be.

There must be a way of lining everything up.

Any advice?

Ta.

解决方案

I''m moving this thread to the HTML forum.

There should be some variables that will let you access the current screen width/height. Using this, you can say 1 column will take up 33% of the width, so position them at 0% of the width, 33% of the width, and 66% of the width to get even spacing. From there, you can adjust to see what looks good.

The website will access the current screen based on who is accessing, so it will always take up a proportional amount of space.

Do you have any code written? We generally don''t write that much code for people here is a link if you are interested in learning HTML.

Aric

Do you have any code written? We generally don''t write that much code for people here is a link if you are interested in learning HTML.

Aric

Yeah, I''ve started writing the code but I think I need to know the best way to go about making the layout before doing too much. I don''t want anyone to write the code for me - just point me in the right direction.

I guess what I want is something that will display more or less full screen on 800 wide monitor, and will display same width but with bigger margins left and right on a bigger monitor.

To keep the content (although possibly not the header) displaying OK in a smaller window, I was planning to make the middle column flexible size (using 100% I guess) to fill the gap available, and the left and right columns fixed width. What I''m stuck on is how to go about positioning the L and R columns.

I''ve read about "containers" in css stylesheets but haven''t found a tutorial that covers what I want to know yet. I''m guessing that it''s possible to make a centred, 750px wide container and stick all the other elements into it, keeping it all nicely lined up. That''s what I''m hoping anyway!

The idea of finding out the screen size and working on percentages from there sounds great - is there a piece of code I can put in to find this? But will it work if someone opens a smaller window on their desktop?

Cheers

Genny

这篇关于三栏帮助初学者！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！