Html 如何使用 div 组织页面布局

How to organize page layout with div's

提问by Acorn

I have a question for the more experienced programmers here.

我有一个问题要问这里有经验的程序员。

How can I best organize the div's to have like a left side, a middle side and a right side?

我怎样才能最好地组织 div 的左侧、中间和右侧？

I am doing my website now for a while and I spend half a day moving div's around because they don't stay in place after I put another one in and I want to work with the relative option.

我现在正在做我的网站一段时间，我花了半天时间移动 div，因为在我放入另一个 div 后它们不会留在原地，我想使用相对选项。

Also what I do is get them into position with big negative numbers. It just does not seem to be the right way to do things. I also get scrolbars when everything fits on the screen. Working in designmode in dreamweaver cs3 is not possible, because everything is tumbling all over each other.

另外我所做的是让他们以大负数就位。这似乎不是做事的正确方式。当一切都适合屏幕时，我也会得到滚动条。在dreamweaver cs3 中的设计模式下工作是不可能的，因为一切都在彼此之间翻滚。

I am hoping for some input on how to do this better.

我希望就如何更好地做到这一点提供一些意见。

thanks, Richard

谢谢，理查德

回答by Acorn

In my opinion, here are some basic principles to keep in mind when structuring your site with CSS:

在我看来，在使用 CSS 构建网站时，需要牢记以下一些基本原则：

• Positioning: A common mistake that visual developers make when constructing their first pure CSS site layout is to use absolute/relative positioning properties. When placing your elements on a page, it is all about the box modeland how margins, padding and widths interact with each other. There is no need to use the position property at all until you are further along. There are some exceptions to this rule, but we'll keep it simple for now.

• Wrappers & containers: Having mentioned the box model above, leads me to my next point. You should be able to position all of your structural elements using the margin property correctly. Sometimes developers mix up padding/margin which results in "unexpected" behavior. Let's say you want to create header, content, and sidebar elements. On top of that, you want to add content in those elements without messing with the parent elements. You need to set a specific height for your header (px, % etc.), you'll also need to set widths for your content and sidebar elements. When working with the content within these elements, I typically use another element which acts as a "container" for your content. Steer clear from redefining the size of the "container" element, because you would have already defined this in your parent element. This way, you are free to use margin, padding freely without affecting the size of the parent element... if that made any sense ;)

• Clear your floats: To position your content and sidebar, or other column type elements you are going to have to use the float property on one or more of your elements. An important thing to keep in mind when using float is that you should clear them after you've finished a "float set". Meaning, if you have 3 columns, all with the float:left properties set, you should clear them after the set and NOT after each column. It depends on the layout but typically this way you'll control over floats and you won't run the risk of unexpectedly floating other elements that don't need it.

• When in doubt, reset your margin/padding: Differences in browsers are frustrating to say the least. You can help combat this by destroying browser default properties if they are not defined. I always find that if reset the margin/padding to 0 for a questionable element, I can easily correct spacing issues.

• Use the cascade, don't re-define: Remember that if you've already defined a bunch of css properties, and you are working within a child element, you don't need to redefine properties. Children inherit their parents properties so only define differences.

• 定位：视觉开发人员在构建他们的第一个纯 CSS 站点布局时犯的一个常见错误是使用绝对/相对定位属性。将元素放置在页面上时，一切都与框模型以及边距、填充和宽度如何相互作用有关。在您继续前进之前，根本不需要使用 position 属性。这个规则有一些例外，但我们现在会保持简单。

• 包装纸和容器： 上面提到了盒子模型，让我进入下一点。您应该能够正确使用 margin 属性定位所有结构元素。有时开发人员会混淆填充/边距，从而导致“意外”行为。假设您要创建标题、内容和侧边栏元素。最重要的是，您希望在不干扰父元素的情况下在这些元素中添加内容。您需要为标题设置特定的高度（px、% 等），还需要为内容和侧边栏元素设置宽度。在处理这些元素中的内容时，我通常使用另一个元素作为内容的“容器”。避免重新定义“容器”元素的大小，因为您已经在父元素中定义了它。

• 清除浮动：要定位您的内容和侧边栏或其他列类型元素，您将不得不在一个或多个元素上使用浮动属性。使用浮动时要记住的一件重要事情是，您应该在完成“浮动设置”后清除它们。意思是，如果你有 3 列，都设置了 float:left 属性，你应该在设置之后清除它们，而不是在每列之后清除它们。这取决于布局，但通常通过这种方式您可以控制浮动，并且不会冒意外浮动不需要它的其他元素的风险。

• 如有疑问，请重置您的边距/填充：至少可以说浏览器的差异令人沮丧。如果未定义浏览器默认属性，您可以通过销毁它们来帮助解决此问题。我总是发现如果将有问题的元素的边距/填充重置为 0，我可以轻松纠正间距问题。

• 使用级联，不要重新定义：请记住，如果您已经定义了一堆 css 属性，并且您正在一个子元素中工作，则不需要重新定义属性。孩子继承他们父母的属性，所以只定义差异。

This will continue to make sense the more you work with it, but I hope this will provide you with some points to keep in mind when structuring a CSS layout. There are some links above that are great resources as well, but I thought I should share some of things I personally think of while working in CSS.

随着您使用它的次数越多，这将继续有意义，但我希望这将为您提供一些在构建 CSS 布局时要记住的要点。上面有一些链接也是很好的资源，但我认为我应该分享一些我个人在使用 CSS 时想到的东西。

Acorn

橡子

回答by Ben Hughes

Use a CSS grid layout

使用 CSS 网格布局

Blueprint is my current favorite: http://www.blueprintcss.org/

蓝图是我目前最喜欢的：http: //www.blueprintcss.org/

I use it through Compass/Sass: http://wiki.github.com/chriseppstein/compass

我通过 Compass/Sass 使用它：http: //wiki.github.com/chriseppstein/compass

Positioning manually is a recipe for disaster unless you really like thinking through floats. Grid systems allow you to specify things in a simpler manner. Compass allows you to do this while maintaining semantic markup.

除非你真的喜欢通过浮动来思考，否则手动定位是一种灾难。网格系统允许您以更简单的方式指定事物。Compass 允许您在保持语义标记的同时执行此操作。

回答by Nicholas Flynt

If you want divs on the left, middle, and right of something, you're looking for the float property. Do this on your left div for example:

如果您想要某个东西的左侧、中间和右侧的 div，您正在寻找 float 属性。例如，在您的左侧 div 上执行此操作：

float: left;
position: relative;

and it will move the div to the left of the page, and force the other content to the right of it. This is an easy way to create a sidebar for an area of the page, for example. You can still set height and width on an element floated this way, and since it can still accept the position: relative; property, it's easy to position other things inside it.

它会将 div 移动到页面的左侧，并将其他内容强制移动到它的右侧。例如，这是为页面区域创建侧边栏的一种简单方法。您仍然可以在以这种方式浮动的元素上设置高度和宽度，并且由于它仍然可以接受位置：相对；属性，很容易在里面放置其他东西。

回答by Wadih M.

There's no need to learn blueprintcss to create a simple div layout.

无需学习 blueprintcss 即可创建简单的 div 布局。

To get started with your div layout:

要开始使用 div 布局：

1. Put a widthon the divs
2. Give them all a floatstyle.

1. 在 div 上放一个宽度
2. 给他们一个浮动风格。

Example for a three columns layout:

三列布局示例：

<div id="left_panel"  style="float:left; width:100px;">Left pane (100px)</div>
<div id="contents"    style="float:left; width:400px;">Contents (400px)</div>
<div id="right_panel" style="float:left; width:100px;">Right pane (100px)</div>

Additional effects of div layouts:

div 布局的附加效果：

1. If you resize your window and shrink it, div's can wrap to the next line.
2. If contents inside the div might get bigger than the div's height/width, use the "overflow" style to decide what to do. You can set it to hide the overflowing contents, or automatically add scrollbars to your divs.

1. 如果您调整窗口大小并缩小它，div 可以换行到下一行。
2. 如果 div 内的内容可能比 div 的高度/宽度大，请使用“溢出”样式来决定要做什么。您可以将其设置为隐藏溢出的内容，或自动向您的 div 添加滚动条。

I hope this shows you how simple div layouts really are. You can do your layout with divs instead of tables, but that doesn't mean that every table should be converted to divs, for example actual tabular data should be in tables.

我希望这向您展示了 div 布局是多么简单。您可以使用 div 而不是表格进行布局，但这并不意味着每个表格都应该转换为 div，例如实际的表格数据应该在表格中。

回答by SpliFF

Start with a proven layout from a site like position is everything. Save you some time reinventing the wheel. CSS is something that just takes time to learn.

从一个网站开始一个经过验证的布局，比如位置就是一切。节省您重新发明轮子的时间。CSS 是一种需要时间来学习的东西。

Wanting to 'work with the relative option' is not always an option or the best way. It depends on what you are trying to do in each particular case.

想要“使用相对选项”并不总是一种选择或最好的方式。这取决于您在每种特定情况下尝试做什么。

Anyway the usual reason for things moving around is because you are miscalculating the size of things. If your layout is tight it only takes a mistake of 1px to push a column down under everything. Try putting borders on things temporarily so you can better visualise what is going on.

无论如何，事物移动的通常原因是因为您错误地估计了事物的大小。如果您的布局很紧凑，那么只需要 1px 的错误就可以将列向下推到所有内容下。尝试暂时为事物设置边界，以便您可以更好地想象正在发生的事情。

回答by krosenvold

Using div's to create a table is usually not a really good idea. While certainly possible, the best solution is almost always to create an table. Well-thought out use of tables is not a speed problem on modern browsers.

使用 div 创建表格通常不是一个好主意。虽然当然有可能，但最好的解决方案几乎总是创建一个表。在现代浏览器上，经过深思熟虑的表格使用不是速度问题。

回答by jonsidnell

Hopefully this isn't deemed argumentation-by-link :)

希望这不被视为逐链接论证:)

I was first learning about div-based multi-column layouts about 5 years ago, and the tutorial that helped things click for me was at Maxdesign.com. That links to a tutorial taking you step-by-step through building a basic 3-column layout.

大约 5 年前，我第一次学习基于 div 的多列布局，帮助我点击的教程是在Maxdesign.com。该链接指向指导您逐步构建基本 3 列布局的教程。

I don't think I would follow that method completely these days (for example, techniques like faux columnshave come about since that tutorial was written), but it was a good ice-breaker into the mode of thinking that CSS-based layout requires.

我不认为我现在会完全遵循这种方法（例如，自从编写该教程以来，就出现了诸如假列之类的技术），但它很好地打破了基​​于 CSS 的布局所需的思维模式.