在html页面上安排项目

自从我编写了html以来，它已经很长时间了。我的文档目前有一个包含在div标签内的谷歌图表。我想添加一个组合框和文本框到我的页面来操纵图表后面的js。以前，我使用表格来组织页面上的项目，但是今天是如何完成的？在html页面上安排项目

顺便说一句，我的DIV是这样的：

<div id="visualization" style="width: 600px; height: 400px;"></div>

2012-08-04 Baz

一个很好的方法是[Twitter的引导电网系统（http://twitter.github.com/引导/ scaffolding.html）。 – 2012-08-04 18:22:55

我会说浮动和相对/绝对定位更频繁地使用（CSS）。表格仍然有效（种类） – dgeare 2012-08-04 18:23:17

查阅“无表格布局”。 – JMM 2012-08-04 18:23:57

在HTML 4，你想用div元素，然后将它们分配样式ID或类：

<div id="mainContent> 
    <div class="container"> 
     <!-- Content Here--> 
    </div> 
    <div class="container"> 

    </div> 
</div>

CSS;这将给你为中心960像素页宽，边框每个容器

html, body {text-align: center} 
#mainContent {width: 960px; margin: 0 auto;} 
.container {margin: 10px; border: 1px #000 solid}

上拿到两列，您可以使用以下为.container

.container {margin: 10px 0 10px 10px; width: 465px; float: left}

当你永远漂浮的东西，你总是希望给它一个特定的宽度，如果浮动元素的容器没有特定的高度，你可以添加

<div style="height: 0; clear: both">&nbsp;</div>

否则容器不会延伸到对浮动元素的底部，像this

我会尽量找一些布局的东西，在编辑

编辑：使用HTML 5的主要区别在于它添加了像header,footer和section这样的元素。在HTML 4中只有div。

编辑：

赫雷什在布局使用浮标另一个体面教程：

2012-08-04 18:45:06

也要小心，因为我在搜索，我发现许多文章仍然推荐表。正如其他人所说，不要使用表格进行布局。 – 2012-08-04 18:49:56

回答