让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. Vue基础系列（五）——Vue中的指令（中）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. Python面向对象-多重继承之MixIN

    以Animal类为例,假设要实现以下4种动物: Dog(狗).Bat(蝙蝠).Parrot(鹦鹉)和Ostrich(鸵鸟) 如果按照哺乳类和鸟类来区分的话,可以这样设计: Animal: |--Mam ...

  3. Oracle 创建用户，赋予指定表名/视图只读权限

    步骤指南 创建用户 格式:; 语法:create user 用户名 identified by 密码; 注:密码不行的话,前后加(单引号):' create user TEST identified ...

  4. 设计模式-单例模式code

    package singeton; import java.security.SecureRandom; /** * @author Zero * @since 2019-08-13. * Descr ...

  5. Jmeter性能测试插件jpgc的安装

    一.获取插件包 1.访问官网获取 官网地址:https://jmeter-plugins.org/install/Install/ 2.百度网盘下载 链接:https://pan.baidu.com/ ...

  6. 微信小程序模板（template）和组件的区别

    template模块主要是展示,方法需要在使用template的页面中定义,对于通用的数据,最先想到或者理应是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作. ...

  7. Complete_NGINX_Cookbook

    Complete NGINX Cookbook 下载地址:Complete NGINX Cookbook

  8. SpringCloudGateWay修改请求路径，从注册中心获得服务

    SpringCloudGateWay修改请求路径,从注册中心获得服务 @Resource    private DiscoveryClient disClient;    @Resource    p ...

  9. zhy2_rehat6_mysql04 - MHA_故障演示与切换.txt

    export LANG=en_US 环境:------------------------------------------ 机器 VPN ip linux 账号/密码manager1 172.28 ...

  10. PS各种行业文件创建

    ps可以运用于:印刷.喷绘.网络等行业. 印刷 创建的印刷文件需要修改为毫米为单位,分辨率300以上,CMYK颜色格式: 16开的尺寸为:210*285mm:但在印刷之后,剪裁需要留出出血位,上下左右 ...