在这里，先想说一下div布局和table布局孰优孰劣的问题，个人觉得其实不是说div布局就一定要好于table。个人感觉最外层的布局用table蛮不错的，就是代码过多，眼晕，没别的坏处。
言归正传，假设想用布局一个固定宽的的网站，应该怎样去做？div是“块”元素，每个div默认都会占据一行的，如果要用div进行布局的话，我们首先要做的就是使div可以横向排列。这通过设置float为left实现的。
我们可以简单的来试验一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body >
<div style="width:200px;float:left;border:1px solid red" >
第一个
</div>
<div style="width:200px;float:left;border:1px solid red" >
第二个
</div>
</body>
</html>
看，两个div紧挨着排列起来了。
接下来呢？还有啥要做的呢?我们需要div能够自动扩展才行，更多的情况下，为了布局美观，我们还需要给div指定一个最小的高度。因为在浏览器中，指定了高度div是不随着里面内容的增加扩展的，我们需要设置上min-height这样的属性，这时为了在ie6下也能够使用，我们还需要增加一个ie专用高度：_height。
这样，就可以完美的进行竖向自动扩展了。
请注意，这里的说的是自动扩展，而不是自动充满，关于让div自动充满整个页面的方法，请参见我的其他文章。
还有啥要做的呢，由于对内部div指定了float，此时的外部div就不能够自动扩展了，我们需要在后面增加一个div，设置clear属性为both，以便于清除浮动。这时，一切OK了！
最后，我们还要使页面居中展示，一般对于固定宽的的页面都会这样设置，对称嘛。
我们需要在body上增加text-align:center样式以及在最外部的div上增加margin-left: auto;margin-right: auto;width:604px;即可。
全部代码如下。很简单吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body style="text-align:center" >
<div style="border:#000000 solid 1px;margin-left: auto;margin-right: auto;width:604px;">
<div style="width:300px;min-height:100px;border:#00ffff solid 1px;float:left">第一个<br/>第一个<br/>第一个<br/第一个<br/>第一个<br/>第一个<br/>第一个<br/>第一个<br/>第一个<br/></div>
<div style="width:300px;min-height:100px;border:#00ffff solid 1px;float:left">第二个<br/>第二个<br/>第二个<br/></div>
<div style="clear:both"></div>
</div>
</body>
</html>
当然，这个例子还是比较简陋的，可以参照我的网站 www.txstory.com 的首页面来看一下用div布局的实际效果，非美工出品，比较简陋，请多包涵
分享到：
相关推荐
以上就是`div`横向排列的常见方法，根据项目需求和浏览器兼容性考虑，可以选择合适的方法进行布局。随着技术的发展，现代布局如Flexbox和Grid已经成为首选，因为它们提供了更多的灵活性和控制力。同时，理解并掌握...
2. **CSS基础样式**：为`<div>`元素添加基础样式，如宽度、高度、内边距和背景色，以满足布局需求。同时，可以为`.step`类设置浮动或者使用Flexbox或Grid布局，确保步骤元素横向排列。 ```css .step { width: 200...
这种布局的特点是每个元素（通常是图片）的宽度不固定，但它们的左侧边缘会对齐，形成一种自适应的错落效果，类似于自然状态下水从高处流下形成的瀑布。在传统的瀑布流布局中，元素通常是垂直排列的，但在本案例中，...
例如，我们可以使用float属性实现流式布局，使多个<div>元素按顺序横向排列；利用display属性的flexbox或grid模式，可以轻松创建响应式和自适应的布局。 这十个经典布局模版可能包括但不限于以下类型： 1. **一栏...
通过CSS，我们可以将多个`<div>`元素并排放置，实现横向布局。 **CSS+DIV的横向导航** 在"CSS+DIV简单的横向导航"示例中，我们通常会遇到以下几个关键点： 1. **结构化HTML**：首先，我们需要创建一个HTML结构，...
此外，需要设置`div`的固定宽度，例如`1000px`，确保在`table`宽度超出时触发横向滚动。 然而，直接设置`table`的`width`属性可能不会生效，因为`table`有其特殊的布局规则。正确做法是使用`min-width`属性来设定...
在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航...
1. **设置整体布局**：使整个页面居中并定义宽度。 ```css body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0 auto; height: auto; width: 760px; border: 1px solid #006633...
本示例"div应用横向菜单效果演示"聚焦于如何利用`div`来实现一个横向导航菜单，这是一种常见的网站布局技巧，尤其适用于创建用户友好的界面。横向菜单通常位于页面顶部，提供清晰的导航链接，帮助用户快速访问网站的...
### DIV+CSS完美布局知识点详解 #### 一、DIV+CSS布局基础概念 **DIV+CSS**是一种网页设计布局方式，其中**DIV**是HTML中的一个标签，用于定义文档中的独立区域；**CSS**（Cascading Style Sheets）即层叠样式表，...
使用媒体查询(`@media`规则)可以根据设备的视口宽度调整布局和样式。 6. **代码示例**： - 一个简单的HTML结构可能如下： ```html <div class="menu-item">菜单1 <div class="submenu">子菜单1</div> </div>...
1. 设置`<div#navbar>`的宽度，将其设置为全屏宽度，并将其居中显示： ```css #navbar { width: 100%; margin: 0 auto; } ``` 2. 隐藏`<ul>`的默认圆点： ```css #navbar ul { list-style-type: none; padding: ...
在IT行业中，"div横向选择_相框横向浏览2.0"是一个关于前端网页开发的项目，主要关注的是用户界面的交互设计，特别是图片展示的布局方式。这种设计模式通常用于图片画廊或者产品展示，使得用户可以方便地横向浏览一...
一行三列布局利用浮动和宽度控制，让列表项横向排列；一行多列布局则是通过单一宽元素配合底部边框，模拟出多列效果。这两种布局方法是网页设计中常见的布局模式，能适应不同场景的需求。理解并熟练掌握这些技巧，有...
2. **JS+DIV+CSS横向菜单.html**：此文件结合了 `JavaScript` 和 `DIV+CSS`，可能包含更高级的功能，比如动态加载下拉内容或者响应式的菜单布局。`JavaScript` 可以增加更多的交互性，如实时更新菜单状态，或者根据...
本教程将深入探讨CSS在网页布局中的应用，包括固定宽度、自适应宽度、居中对齐、多列布局以及各种导航菜单的实现。 一、固定宽度布局 在第一章中，我们学习了如何创建一列固定宽度的布局。这种布局适用于内容宽度...
### Div+CSS布局大全知识点详解 #### 一、Div+CSS布局概述 - **定义**：Div+CSS布局是指利用HTML中的`<div>`标签配合CSS（层叠样式表）来实现网页的设计与布局的一种技术手段。这种方法相较于传统的表格布局更为...
本文内容节选自《Div+CSS布局大全》，该电子书由JesseZhao在博客园整理发布。该书为初学者和进阶用户提供了丰富的CSS布局技巧，涵盖了从基础入门到高级技巧的各个方面。书中不仅教授了如何使用div和css进行网页布局...