让div,span等块级、非快级元素排列在同一行

by:授客 QQ：1033553122

例子：让两个div排列在同一行

给div添加float样式

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<style>

div{

float: left;

}

</style>

</head>

<body>

<div style="height: 40px;width: 80px;background-color: red" >

div1

</div>

<div style="height: 40px;width: 70px;background-color:grey" >

div2

</div>

</body>

</html>

说明：让div和span排列在一起也可以用上述上方法

例子：让div和两个span排列在同一行

额外要求，然第二个span排列在最右侧

使用display-inline（为什么要使用display: inline-block;而不是display: inline; 是因为display: inline导致元素的height和width样式失效）

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<style>

div,span{

display: inline-block;

}

.span2 {

float:right

}

</style>

</head>

<body>

<div style="height: 40px;width: 80px;background-color: red" >

div1

</div>

<span style="height: 40px;width: 70px;background-color:blue">

span1

</span>

<span class="span2" style="height: 40px;width: 70px;background-color:grey">

span2

</span>

</body>

</html>

运行结果

说明：第一个div和第一个span之间存在空白间隙，那是因为div元素和span元素之间存在换行等空白，去除即可，如下

<div style="height: 40px;width: 80px;background-color: red" >

div1

</div><span style="height: 40px;width: 70px;background-color:blue">

span1

</span>

CSS 让div,span等块级、非快级元素排列在同一行的更多相关文章

  1. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  2. css 文档流中块级非替换元素水平区域的计算规则(1)

    最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...

  3. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  4. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  5. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  6. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  7. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  8. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  9. Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...

随机推荐

  1. MongoDB 快速扫盲贴

    长话短说 经过996的历练,开发者潜意识里总是以object的视角看待事物, 现在某些数据库也具备这样的视角. MongoDB是一个文档型(类JSON 文档)数据库,相比传统的关系型row/colum ...

  2. C#界面设计相关设置

    1.Anchor属性设置 对需要设置的控件,如主窗体中的TextBox,设置Anchor为上下左右都停靠,就会实现随着窗体的变化而变化. 2.AutoScaleMode属性的用法:<转自:htt ...

  3. 通过谷歌浏览器从官网下载Android Studio

    谷歌访问助手安装教程参考:https://www.cnblogs.com/waiwai14/p/11697371.html 谷歌访问助手下载地址:https://pan.baidu.com/s/1YH ...

  4. 关于css布局的记录(二) --网格布局

    网格布局 学习来自阮一峰老师的教程网格布局和网络上的一些资料的学习 1.定义: 顾名思义,网格布局是将页面按行(row)和列(column)划分成一个个网格来进行布局 使用方法:display:gri ...

  5. create connection SQLException, url: jdbc:mysql://localhost:3306/demo, errorCode 1045, state 28000

    错误原因: 配置文件中 username 与 Mysql 关键字冲突 改为:

  6. English:2019100401_Suffix"ery"

    Ax_introduction source a Frech mean to "state,quality,act,place where etc" 1)After the ver ...

  7. WordPress 文件下载漏洞

    Google dork:inurl:"/wp-content/themes/liberator/inc/php/download.php" exploit:https://www. ...

  8. iOS----------componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

    将string字符串转换为array数组 NSArray  *array = [Str componentsSeparatedByString:@","]; ＝＝反向方法 将arr ...

  9. Abp RabbitMqEventBus

    RabbitMQ安装介绍查看该网址 两个App都要配置 appsettings.json { "RabbitMQ": { "Connections": { &q ...

  10. oracle 根据时间戳查询date类型sql

    话不多说上sql: select to_char(1574837126879/(1000*60*60*24)+to_date('1970-01-01 08:00:00','YYYY-MM-DD HH2 ...