让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. SpringBoot2基础，进阶，数据库，中间件等系列文章目录分类

    本文源码:GitHub·点这里 || GitEE·点这里 一.文章分类 1.入门基础 SpringBoot2:环境搭建和RestFul风格接口 2.日志管理 SpringBoot2:配置Log4j2, ...

  2. ProjectServer2010升级到ProjectServer2016,Sharepoint2010升级到Sharepoint2016第三章

    继续上一章,转换了身份认证模式后继续将WSS_Content备份还原到2016数据库服务器上升级,发现还是报错,报错截图如下: 查看日志,提到某些网站集还体验还是2010的,需要升级,可是我明明升级了 ...

  3. Python操作MySQL的一些坑

    pip安装库时遇到的问题   我使用ubuntu系统通过pip安装MySQLdb库的时候,报了一堆错,解决了半天,没搞定.然后安装另一个库pymysql一下就OK了,它们的功能都是一样的.这个问题我没 ...

  4. 使用 Docker 和 Nginx 打造高性能的二维码服务

    使用 Docker 和 Nginx 打造高性能的二维码服务 本文将演示如何使用 Docker 完整打造一个基于 Nginx 的高性能二维码服务,以及对整个服务镜像进行优化的方法.如果你的网络状况良好, ...

  5. Linux ipv6 无状态 设置为 eui64

    Linux ipv6 无状态 设置为 eui64 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-08-22. 无状态的ipv6有eui64和stable-privacy模式, 在家 ...

  6. python函数中参数的传递

    Python唯一支持的参数传递方式是『共享传参』(call by sharing)多数面向对象语言都采用这一模式,包括Ruby.Smalltalk和Java(Java的引用类型是这样,基本类型按值传递 ...

  7. Xposed反射字段流程分析

    在XposedBridge源码中,反射字段的方法封装在de.robv.android.xposed.XposedHelpers类里面.下面来看看Xposed是如何获取和设置字段的值的 获取字段的值 获 ...

  8. C# -- Quartz.Net入门案例

    1. 入门案例 using Quartz;using Quartz.Impl; public class PrintTime : IJob { public Task Execute(IJobExec ...

  9. Laravel Validator

    Controller use Validator; public function Validators(){ $rules = [ 'title' => 'required|max:255', ...

  10. SSH框架之Spring第三篇

    1.1 AOP概述 1.1.1 什么是AOP? AOP : 全称是Aspect Oriented Progamming既 : 面向切面编程.通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技 ...