css代码思考:display和float
关于display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.num1{
display: inline;
}
.num2{
display: inline;
}
</style>
</head>
<body>
<div class="num1">
nihao
</div>
<div class="num2">
buhao
</div>
</body>
</html>
要想并排显示nihao 和 buhao 必须两个块状元素都是内联元素。少一个都不行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.num1{
display: inline-block;
}
.num2{
display: inline-block;;
background: #314181;
width: 80px;
}
</style>
</head>
<body>
<div class="num1">
nihao
</div>
<div class="num2">
buhao
</div>
</body>
</html>
首先内联（inline）是没有宽高的。 但是你想让他们并排，又想给这个元素宽高。那么使用inline-block。
关于float
1 <div class="num1">
你好
</div>
<div class="num2">
heihei
</div>
1 num1的浮动，会让num2上来，但是num2的浮动则不会对num1有什么影响。
2 元素浮动后，他会变为 inline-block。其宽度不是100%。
案例：为什么浮动没有效果。
关键点在于p元素的父元素 .witter-text没有宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.twitter-pic img{
width: 42px;
height: 42px;
border-radius: 42px;
}
.twitter-text{
float: left;
background-color: green;
width: 80%;这里若是不加宽度，那么他的儿子P标签就会在占满一行后另外重启一行。
使p标签可以占宽度的100%。那么此时浮动也就没有任何效果。
}
.twitter-pic{
float: left;
padding: 17px;
background-color: blue;
/*display: inline-block;*/
}
.twitter-text p{
display: inline;
}
</style>
</head>
<body>
<div class="owl-item">
<div class="twitter-pic">
<a href="http://www.ioart.com/news/accessories_blog6/">
<img src="http://static.ioart.com/media/magentothem/blog/002564ba9d45115e1e535a.jpg"
alt="艺术衍生品电商图标" />
</a>
</div>
<div class="twitter-text">
<span class="name">
<a href="http://www.ioart.com/news/accessories_blog6/">
Lily
</a>
</span>
<p>
艺术衍生品是艺术作品衍生而来的艺术与商品的结合体，具备一定的艺术附加值。
包括经艺术家亲笔签名且限量发行的专供收藏和欣赏的版画，印有艺术家代表作品的文具、
生活用品、服装服饰以及与艺术元素相结合的具有收藏价值的产品等。
</p>
</div>
</div>
</body>
</html>css代码思考:display和float的更多相关文章
- 页面css代码
博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...
- CSS布局 ——从display，position， float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- CSS代码重构与优化之路
作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...
- CSS代码重构
CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...
- CSS代码重构与优化
CSS代码重构的基本方法 前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它. 提高CSS性能 ...
- CSS代码重构与优化之路（转）
CSS代码重构与优化之路 阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论 我自己总结的方法 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 我的页面定制CSS代码（SimpleGamboge皮肤）
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
- 实用的60个CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
随机推荐
- mysql联合查询sql优化
我们在使用mysql数据库时,经常会使用到mysql的联合查询,联合查询分为内连接和外连接,内连接查询结果是联合的表都存在匹配才会有结果,外连接则根据驱动表是否存在匹配来生成结果集. 这里使用mysq ...
- Gym10198-Mediocre String Problem-2018南京ICPC现场赛
目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog @ Problem:传送门 Portal 原题目描述在最下面. Solu ...
- 116、TensorFlow变量的版本
import tensorflow as tf v = tf.get_variable("v", shape=(), initializer=tf.zeros_initialize ...
- mysql + grafana监控
1.首先需要增加授权 CREATE USER 'exporter'@'localhost' IDENTIFIED BY 'XXXXXXXX' WITH MAX_USER_CONNECTIONS 3 ...
- automate sap遇上的一些问题
1. get column name of SAPGuiTable columnCount = SAPGuiSession("Session").SAPGuiWindow(&quo ...
- Java享元模式(Flyweight Pattern)
享元模式(Flyweight Pattern)主要用于减少创建的对象数量,并减少内存占用并提高性能. 这种类型的设计模式属于结构模式,因为该模式提供了减少对象计数的方法,从而改善应用的对象结构. 享元 ...
- maven（二），Linux安装maven3.5.3及配置
Linux系统,ubuntu-16.04.4,安装maven3.5.3 一.创建文件夹 注意Linux用户,这个如果不是root用户,命令前面需要加:sudo //创建一个目录 mkdir /usr/ ...
- Learning OSG programing---osgScribe
Learning OSG programing---osgScribe Scribe可以翻译为素描,抄写等.本例通过在模型表面添加一层素描,来显示模型的骨架. 关键代码: osg::ref_ptr&l ...
- VMware Workstation Pro 无法在Windows 上运行 检查可在Windows上运行的此应用的更新版
1.问题描述 2.排查原因 国庆节后微软推送了一个新的更新补丁,更新之后发现VMware无法打开(未更新前正常). 3.解决方案 3.1卸载微软更新补丁 Windows 10的安全更新难以被彻底规避, ...
- vscode中git的配置
vscode中对git进行了集成,很多操作只需点击就能操作,无需写一些 git 指令. 不过这就需要你对vscode进行配置.下面我会讲到 git 的配置与免密码上传 github VSCode配置g ...