<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.a{width:700px; height:auto; overflow:hidden}
.b{width:150px; height:80px; padding:10px 0px 10px 0px; text-align:center; float:left}
</style>
</head>
<body>
<div class="a">
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
<div class="b"><img src="http://img.baidu.com/img/iknow/logo-iknowxjd.gif" width="137" height="80" /></div>
</div>
</body>
</html>
使用【div】来实现，规定好div的宽度，设置div的样式如 <div style="width:120px; height:120px; float:left"> 那么就可以实现自动换行，而不需要判断到第几个再换行。
转自：
http://apps.hi.baidu.com/share/detail/21373188
还有用li实现的：
<style type="text/css">
.aa{ width:300px;}
.aa ul{ margin:0px; padding:0px; list-style:none;}
.aa ul li{ float:left; width:70px;}
</style>
<DIV class="aa">
<UL>
<li><a href="#">中国</a></li>
<li><a href="#">电子商务</a></li>
<li><a href="#">互联网</a></li>
<li><a href="#">网页</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">阿里巴巴</a></li>
<li><a href="#">特效代码</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">网络推广</a></li>
<li><a href="#">市场营销</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO</a></li>
</UL>
转自：
http://wenwen.soso.com/z/q218164550.htm
分享到：
相关推荐
当内容长度超出容器（如div元素）的宽度限制时，我们通常希望这些内容能够自动换行，而不是溢出容器导致页面布局混乱。本文将详细阐述如何使用CSS属性来控制内容在div宽度溢出时的自动换行处理方法。 在CSS中，控制...
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: <div id=”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:...
它提供了丰富的特性，如语法高亮、代码提示、自动换行和代码折叠，满足开发者高效编码的需求。在本文中，我们将探讨如何使用Monaco Editor来实现这些功能。 首先，Monaco Editor支持多种编程语言，包括JavaScript，...
如果希望表现得像是块级元素，但又不希望它完全占据一整行（如同<div>标签），我们需要了解并掌握display属性的使用技巧。 当我们对标签应用display:inline-block时，它能够实现同时拥有内联和块级元素的特性。具体...
当用户在编辑器中插入代码后，若希望在代码块之后能够正常换行，编辑器应自动将光标移动至代码块外部。这通常依赖于编辑器的内部逻辑和插件的处理方式。而问题中的解决方案是在插件处理代码插入后，通过在JavaScript...
- `div` 是一个块级元素，它默认会占据整个宽度并自动换行。相比之下，行内元素如 `span` 不会独占一行，它们会在同一行内排列，直到该行无法容纳更多内容。 2. **CSS 样式化**： - 通过 CSS，我们可以对 `div` ...
在本文中，将讨论CSS中的换行控制技术，特别是如何使用CSS强制实现文本换行...无论是在简单文本块、`<div>`元素还是表格单元格中，这些CSS属性都能提供灵活的文本布局控制，使网页设计师能够创造出既美观又实用的页面。
首先，`div` 标签代表一个分区或节（division/section），它是一个块级元素，这意味着它会在页面上占据一整行，并且前后都会自动换行。`div` 主要用于对网页内容进行分组和布局，可以通过CSS来控制其样式和位置。...
在实际项目中，Vue Highlight.js还支持自定义配置，比如设置全局配置、控制是否自动高亮代码块等。例如，你可以通过以下方式禁用自动高亮并手动触发： ```javascript Vue.use(VueHighlightJS, { autoRevert: false...
当用户在 `textarea` 中输入并使用 JavaScript 提交文本时，空格和换行会被编码为 `/s` 和 `/n` 字符。在前端与后端交互时，处理这些特殊字符是确保文本正确显示的关键。 如果文本最终仍要在 `textarea` 中显示，...
在网页设计领域，`div`元素是不可或缺的基础构建块，用于布局和组织页面内容。`div`全称为“division”，即分区或分组，它是一个通用的容器，可以容纳任何类型的HTML元素。在这个名为“快速精通div”的学习资料中，...
它会在页面上创建一个新的块，相当于在前后自动添加了换行。`<div>`常用于组织大段的结构化内容，如一个段落、一个导航栏或者一个侧边栏。例如，如果你要分隔页面的两个区域，可以使用`<div>`： ```html <div class...
它是块级元素，意味着它默认占据整行宽度，并在其前后自动添加换行。 2. **`div`的基本结构** `div`元素通过`<div>`标签定义，如： ```html <div>这是div的内容</div> ``` 内容可以是文本、图片、表格等其他...
HTML 相关的面试题和答案，涵盖了 HTML 中的常见问题和解答，包括如何让不定宽高的 DIV 垂直水平居中、position 属性的作用、px、em、rem 的区别、BFC（块级格式化上下文）的概念和应用、表格自动换行的实现等。...
nowrap (boolean) – 当值指定为false时，过长的行将会被自动换行，以避免出现横向滚动条。 noborder (boolean) – 是否显示边框的开关。 no_cc (boolean) – 当值为true时，code标签将会被解析，但代码块不会有...
5. `flex-wrap`：决定是否允许子元素换行，值可以是`nowrap`（不换行，默认）、`wrap`（换行）或`wrap-reverse`（反向换行）。 6. `flex-basis`、`flex-grow` 和 `flex-shrink`：这三个属性用于控制子元素的伸缩比例...
在Web开发中，Div（division）元素常被用作页面结构的基本构建块，而CSS（Cascading Style Sheets）则负责控制这些元素的样式、位置和布局。下面我们将详细探讨Div+CSS布局的相关知识点。 1. **理解Div元素**： - ...
首先，`div`（Division）是一个块级元素，它在页面上表现为一个独立的块，其宽度默认占据100%的父容器宽度，并且每个`div`元素之间会自动换行。`div`常用于创建页面结构，如分割不同区域、设置背景色或边框等。由于`...
块级元素（block）：最常见的标签，常用作其他元素的容器，会自动换行，多个块元素会自动从上到下自动排列。有：div,ul,ol,p,li,header,footer,h1~h6等。行内块元素（dispaly:inline-block）：兼有行内元素...