CSS 让div,span等块级、非快级元素排列在同一行
让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等块级、非快级元素排列在同一行的更多相关文章
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- css 文档流中块级非替换元素水平区域的计算规则(1)
最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素（文档）
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...
随机推荐
- ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- iOS开发 - 超级签名实现之描述文件
简介 因为最近企业签掉得太严重了,上头要求实现超级签进行游戏下载.故有了此文章,记录一下过程. 签名原理其实很简单,超级签名的技术就是使用个人开发者账号,将用户的设备当作开发设备进行应用分发.这也导致 ...
- layui2.5 开关在confirm确认了之后在关/开
<!--默认选中--> <div class="layui-form-item layui-form"> <div class="layui ...
- Win10系统重做
一.准备工作: 1.电脑(台式电脑.笔记本电脑): 2.U盘(内存大于4G): 3.软碟通(UltraISO):下载地址:https://pan.baidu.com/s/1tpCiIyIwK_7LaL ...
- Linux 使用vi命令的教程
一.首先用vi命令打卡要编辑的文件: 注意:vi命令的使用如下: 打开或新建文件,并将光标至于第一行首:[root@centos6 /]# vi /etc/my.cnf 打开文件,并将光标移至最后一行 ...
- 一个类实现Java截屏并保存到指定文件夹
不知小伙伴们有没有遇到过使用java来截屏的需求,截屏后保存到指定的目录,在桌面上没有任何体现,完全不知道已经被截屏了.至于截屏后怎么做,可能有的老铁只是好奇想知道某人在干啥?也有的老铁可能想进行文字 ...
- 极客时间-vue开发实战学习（ant-design vue作者）
vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...
- C语言——线性表及其应用
程序要求 1.建立含n个数据元素的顺序表并输出该表中各元素的值及顺序表的长度.2.利用前面的实验先建立一个顺序表L={21,23,14,5,56,17,31},然后在第i个位置插入元素68.3.建立一 ...
- MySQL的数据库定义语法
创建数据库 在MySQL中,使用 CREATE DATABASE 或 CREATE SCHEMA 语句创建数据库 语法结构: CREATE {DATABASE|SCHEMA}[IF NOT EXIST ...
- CSS入门（边框、轮廓、元素的分类、盒子模型的三个构成部分）
一.边框属性 作用:给元素加上一个边框 第一种: border-top border-bottom border-left boder-right 三个属性值: 粗细 线型 颜色 第二种: borde ...