让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. python操作文件和目录查看、创建、删除、复制

    python内置了os模块可以直接调用操作系统提供的接口函数,os.name查询的是操作系统,‘nt’表示windows系统 >>> import os >>> o ...

  2. JS---变速动画函数封装

    变速动画函数封装 匀速动画:每次步数都是10 (var step=10;) 变速(缓动)动画:每次的步数是用当前位置和目标位置相减 var step=(target-current)/10; 代码如下 ...

  3. Android 项目优化（四）：内存优化

    在之前的文章中我们总结过跟Android 内存相关的知识或者问题,这里先列举一下: 1. Java 内存回收机制——GC机制 2. Java 对象引用方式 —— 强引用.软引用.弱引用和虚引用 3.  ...

  4. ffmpeg+nginx 实现rtsp转rtmp并通过nginx转发

    Windows安装 ffmpeg ffmpeg windows版下载地址https://ffmpeg.zeranoe.com/builds/ static版本就行 配置环境变量:下载的压缩包解压后的路 ...

  5. Nginx核心流程及模块介绍

    Nginx核心流程及模块介绍 1. Nginx简介以及特点 Nginx简介: Nginx (engine x) 是一个高性能的web服务器和反向代理服务器,也是一个IMAP/POP3/SMTP服务器 ...

  6. React-Native三种断点调试方式的流程和优缺点比较

    RN的调试和web端的调试虽然相似,但是也有一些不同,下面就来比较一下三种断点调试方法的差异 总结: 感觉还是第一种好一些 1.React-Native-Debugger工具调试法 1.1 首先我们得 ...

  7. 用python爬虫简单爬取 笔趣网：类“起点网”的小说

    首先:文章用到的解析库介绍 BeautifulSoup: Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能. 它是一个工具箱,通过解析文档为用户提供 ...

  8. 关于Redis 二进制内容的 可视化尝试

    二进制内容的 能否可视化?  网上的资料比较少啊! -------------------------------------------------------------------------- ...

  9. Key Management: Hardcoded Encryption key 密钥管理：硬编码加密密钥

  10. 东芝MCU实现位带操作

    位带操作简介 位带操作的概念其实30年前就有了,那还是 8051单片机开创的先河,如今ARM CM3 将此能力进化,可以说,这里的位带操作是8051 位寻址区的威力大幅加强版.即如果要改写某个寄存器的 ...