div 块的自动换行

最新推荐文章于 2022-11-01 14:59:30 发布
最新推荐文章于 2022-11-01 14:59:30 发布
阅读量722 收藏
点赞数
文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbhrobin2/article/details/84097347
版权 
<!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

 

hbhrobin2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于div,p等块级元素css如何实现自动换行
12-13
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: <div id=”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:...
html中如何div转换下一行,div怎么换行
weixin_30598047的博客
05-31 1万+
DIV怎么才不会自动换行？设定white-space:nowrap就可以不换行了。 但是这样div的宽度会自动增大。如果你想控制宽度的话，可以参考下面两种方式。 This is a test. This is a test.网页设计中DIV标签怎样实现内容换行网页设计中DIV标签实现内容换行，这个的话，就是通过你设置的div的宽度和高度，如果你的文字只要过多，书写超过宽度自然就会换行，也可以说是被...
div_自动换行
骑大马挎大刀
02-23 1万+
多个 子div 横向排序,超出 父div 宽度后,自动换行 <!--父div 使用display: flex;justify-items: center;flex-wrap:wrap样式--> <div style="display: flex;justify-items: center;flex-wrap:wrap"> <!--子div需要有固定的高和宽--> <div style="width:
html div文本自动换行,div里面的内容自动换行
weixin_39718888的博客
05-30 5695
div自动宽度，怎么让里面的文字自动换行从网上找了一下，下面的内容可以参考 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 I...
html 换行字体,div字体换行
weixin_36098237的博客
06-07 1039
div里面文字不自动换行谁能告诉我，我照着视频教学写的，为什么视频里面在#div1中加入 以下代码 word-wrap:break-word;允许长单词换行到下一行：div 字体换行 高度怎么控制换行后 太挤了 让他们有个间距.line-height值变大即可 9ms 9毫秒 TTL = 64(Time To Live存在时间)你可以通过TTL值推算一下数据包已经通过了多少个路由器：源地点..di...
DIV的内容自动换行
qq_41451744的博客
11-01 5534
div 内容自动换行
HTML5&CSS3网页制作：div标记.pptx
05-31
（1）<div>标记是一个块容器标记。可定义文档中的分区或节（division/section）。 （2）可以将网页分割为独立的部分，以实现网页的规划和布局。它可以用作严格的组织工具，并且不使用任何格式与其关联。 （3）大多数...
mainshi:前端面试测试
04-28
​块级元素（block）：​最常见的标签，常用作其他元素的容器，会自动换行，多个块元素会自动从上到下自动排列。有：div,ul,ol,p,li,header,footer,h1~h6等。​行内块元素（dispaly:inline-block）：​兼有行内元素...
WordPress代码高亮插件CodeColorer汉化升级版
05-11
nowrap (boolean) – 当值指定为false时，过长的行将会被自动换行，以避免出现横向滚动条。 noborder (boolean) – 是否显示边框的开关。 no_cc (boolean) – 当值为true时，code标签将会被解析，但代码块不会有...
css笔记课程笔记2019，5，22
05-22
* div: 自动换行 * span：在一行显示 CSS 1、css的简介 * css： 层叠样式表 ** 层叠：一层一层的 ** 样式表： 很多的属性和属性值 * 是页面显示效果更加好 * CSS将网页内容和显示样式进行分离，提高了...
div自动分行的最佳处理，各大浏览器兼容。以及href title的快速展示。
01-26
楼主亲写，亲测。是目前最好的处理div自动分行的方式，且各大浏览器兼容。绝对对这起这分数，对不起这分数你找我。
使用Div自动换行一事
weixin_34343000的博客
06-24 86
自己还是对css或者html方面太差，今天发现使用Div后导致了换行，仔细一查原来这是规范，换成span即可。 DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。 而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 行内元素是指该元素标记的内容不不会对现在的结...
div块级元素内文字换行word-wrap, word-break,white-space。
dejing9744的博客
08-29 419
word-wrap: normal; || word-break: normal; 当word-wrap或者word-break为normal时，也就是浏览器的默认设置时。 换行规则是这样的： 　　　　情景一：　　当一个单词在行尾不能完整容纳时，会自动将这个单词换到下一行，示例如下。 　　　　　　　　　　 　　　　情景二：　　当一个长长的单词在行尾不能完整容纳，并且换行后还...
DIV并排显示并换行
CLeopard's Blog In CSDN
08-26 5716
相加个进度条，类似于
html中div的换行
weixin_34025051的博客
07-27 3963
在html中对文字的换行一般来说会使用<p></p>或者是<br>，但是对于div块的换行，这两个标签都不好用。例如，在一个div块中显示图片，需要在图片下面的div块中输入文字，需要使用一下方法：<STYLE type=text/css>　　　　#description {　　　　　　　　clear:left;　　　　}&lt...
div同行实现或div自动换行
C_Creator的博客
04-25 7568
float:left同行显示 使用"float:left"时，div会影响下一个div。"float:left"会让下一个div排在右边，当前div排在左边。 同行显示 <!DOCTYPE HTML> <html> <body> <div> <div style="float:left;display:inline-block,inl...
一个大的DIV块里，设置小DIV自动换行
qq_41353397的博客
11-28 1412
给每个小的div加float:left给大的div加overflow:hidden,zoom:1即可 css代码： /*小的div样式：*/ .smallDIv{ float:left; } /*大的div样式：*/ .bigDIv{ overflow:hidden; zoom:1; }
html两个div浮动后下一个div怎么换行的问题
热门推荐
小黄鸭编程法
11-12 3万+
刚开始学习网页前端，不懂得问题挺多，总在网上查找相关知识点，但是东西一旦多了就特别难记全了，今天又查东西突然发现别人都是查完以后把东西写一遍文章记下来方便自己也方便后来的新人所以写了这篇稿子，当然大多数都还是从网上跟一些前辈学的，算不上原创，只能说是总结一下自己要用的和前辈留下的一些知识，方便把这些知识为我所用。 以下内容如有冒犯哪位前辈或者原创，还请多多包涵，也可以联系我删除，绝对尊重原...
css块元素自动换行
最新发布
12-29
CSS块元素自动换行可以通过以下两种方式实现： 方式一：使用inline-block属性 ```css .parent { width: 200px; /* 设置父元素宽度 */ } .div1, .div2 { display: inline-block; /* 设置子元素为行内块元素 */ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值