安科网

[CSS]CSS中使用span和div遇到的问题

impress

impress

2019-06-27

关注 关注

一. span和div的区别

1.span是行级元素，div是块级元素
2.span占用的宽度是内容的宽度，而div默认是一行。
所以一般在页面中，只有一行或不到一行文字用span，元素占据多行时用div。

二. 问题

下图是希望得到的效果
[CSS]CSS中使用span和div遇到的问题

div在两个span的下方，但是如果这么写，
[CSS]CSS中使用span和div遇到的问题

div和span的位置重叠，因为对span元素设置了float属性，从而导致浮动塌陷，解决办法是将span元素的高度计算进去，但是因为span元素是行级元素，无法设置高度，所以需要其他解决办法。

三. 解决办法

1. 设置div高度

[CSS]CSS中使用span和div遇到的问题

这样就可以了。

2. 设置div属性display

[CSS]CSS中使用span和div遇到的问题

将div设置为display: inline-block，使其既具有block元素的特性，可以设置宽度和高度，同时也具有inline元素的不换行的特性。
但是这是对第二个span元素设置的float: right属性不生效，因为display: inline-block会使元素按行依次排列，所以第二个span元素的float: right不生效，要想达到想要的效果，可以通过设置margin-left来实现。

[CSS]CSS中使用span和div遇到的问题

3. 设置div属性overflow

[CSS]CSS中使用span和div遇到的问题

将div设置为overflow: hidden，使其形成BFC，可以使div高度自动计算，从而和下面的div不会发生重叠。

4. 设置content属性position

[CSS]CSS中使用span和div遇到的问题

将content设置为position: absolute，所以content会去找第一个position属性不为static的父元素，即html<body>，于是就会相对于html<body>向下移动30px。

这种方法虽然也可以解决问题，但是也会带来新的问题，因为position: absolute会导致content元素脱离文档流，如果在content元素下面还有其他元素，那么其他元素位置可能会和content元素重叠。
例如，
[CSS]CSS中使用span和div遇到的问题

所以又发生了同样的问题，这种方法不推荐。

四. 总结

对于span和div都用时，同时span元素设置float属性时，还是对span外加div使其变成块级元素并设置高度，才不会使其后面的元素受到影响。

span static segmentfault css

impress

impress

0 关注 2 粉丝 0 动态

关注 关注

相关推荐

Html的label和span的区别

从最终效果来看,label与span标签显示方式及作用都一样的但由于label中有for属性的存在,也有着决定性的不同。label标签通常是写在表单内的，他与一个普通的span最大的不同，就是可以和表单元素配对，比如文本框，单选框，复选框。将lable改成

玫瑰小妖 2020-01-29

JS的dom获取span和div图层内容

div和span都是图层，每一个图层都是独立的单元，独立的块对象所以他们可以采用很好的进行网页的布局[layout]div灵活 table固定div独占一行 span不会独占一行获取dom对象 设置div中的html代码 innerHtml属性不只是在di

luvhl 2019-12-29

web前端入门到实战：HTML-div和span标签

<style> .head{ width: 980px; height: 100px; background: red; margin: auto;} .logo{ width: 280px; height: 50px; background:

林大夏 2019-12-29

重学前端学习笔记（四）--div和span不是够用吗？

HTML语义：div和span不是够用了吗？

RainyX 2019-07-01

CSS:span元素margin-top无效的根源

span默认是行属性，而div默认是块属性。

kaiya0 2015-06-16

jQuery 获取div下的所有span的属性，并循环

varname=$(obj).text();varuserid=$(obj).attr("userid");varattrUser=newArray();//alert($("#user1").find("

handsomezsc 2015-03-25

HTML 中的 span 标签标准用途的讨论（样式+交互）

无语义行内元素。在段内定义与该段样式不同的内容的样式。可以通过定义该class使其显示为一个箭头。像这种情况，给<div><h1>等再加一个<span>就可以解决。在某些元素后面再加上其他的不同格式的内容，但不想它到下一

zwq 2013-06-26

jQuery 修改 span 里的内容

varmyvalue='页码：';$(this).html(myvalue);});});myOnload();

超级赛亚人 2012-12-03

如何给span设置宽度(width)？

在网页中，如何给 span 元素设置宽度？很简单嘛，假定宽度为 100 像素，用 css 设置 width:100px。如果你认为这个答案正确，就请继续往下看；否则，你可能已经知道了答案。现在，你可以尝试一下，你会发现这个宽度设置根本就不起作用。因为 wi

hlfsunshine 2012-06-17

如何设置HTML span 的宽度

这看上去是个很简单的问题，似乎用style中的width属性就可以。通过试验以后发现，无效，无论是在Firefox还是IE中都无效。通过查阅CSS2标准中关于width的定义发现，原来CSS中的width属性并不总是有效的，如果对象是inline对象，wi

niehanmin 2012-04-20

HTML中div和span两个标签的区别

块元素相当于内嵌元素在前后各加一个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义 display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。例如，要让图片成为“

帅的相对论 2011-11-18

span边框显示不全

遇到一个span的css的边框显示不全。必须设置span的行高，才能全部显示。类似的问题在超链接css格式里也遇到过，当时没解决，估计也是这个原因。

切慕溪水 2011-04-16

WEB innerHTML中div 和span

今天开发中涉及到对一个层的信息控制，就是控制一个层中显示什么信息，查找资料才知道使用innerHTML属性来控制层的值，这个innerHTML跟表单里面的value属性有点类似，能够控制层的显示值。比如说我一个div层里本来没有值，我处罚一个事件后要显示值

zhangpeng 2011-02-24

CSS中如何把Span标签设置为固定宽度

实际验证结果：IE6 OK， FIREFOX 3 OK。display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性；display:inline-block;——“全”可定制属性的元素特性；可以采用下面方法实现同行且居右对齐。

每天积累一点点 2011-02-18

js获取html的span标签的值方法(超简单)

alert("x1="+x1);alert("x2="+x2);

CommputerMac 2019-05-07

浅谈jquery中delegate()与live()

delegate() 方法为指定的元素添加一个或多个事件处理程序例如给id是showspan的div中的span标签添加事件。//效果就是点击一个段落<div id="showspan">中span标签将在span标签后面添

xiongfeng 2019-04-21

jquery提取元素里的纯文本不包含span等里的内容

}); nodeType元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9

87941037 2013-09-30

探究Html中DIV和Span有何不同

在网页设计中，我们经常用到DIV和Span,但是常常有个疑惑，这两个标签：DIV和Span的区别到底是什么？DIV是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过DIV来布局定位网页中的每个区块。DIV和 Span元素最大的

烟汐忆梦 2010-09-10

CSS代码结构div和span初探

你对CSS代码结构div和span的使用是否熟悉，我们在使用CSS规划网页结构时通常会用到div，div是有语意的，它不象h1或ul等那些标签的语意那么明确而已，div的语意是division，英文的意思是区分、分开、部分。即用它来分割文档的不当部分。我们

林一天 2010-09-03

CSS中SPAN和DIV的区别

SPAN和DIV的区别在于，DIV是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。下面以一个实例来说明这两

houzimanjjt 2010-08-30
impress

impress

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号