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 ...
随机推荐
- UE编辑器
引用ue的js 下载地址http://pan.baidu.com/s/1gdrQ35L <script type="text/javascript" src="__ ...
- JS 時間戳轉日期格式
1.日期轉換為時間戳,(如果日期格式為時間戳,將其轉為日期類型,否則輸出傳入的數據) // 如果時間格式為時間戳,將其轉為日期 function timestampToDate(timestamp) ...
- nginx相关总结
1. Nginx 无法启动解决方法 在查看到 logs 中报了如下错误时: 0.0.0.0:80 failed (10013: An attempt was made to access a sock ...
- 微众银行c++选择题后记
一个类的成员可以有:另一个类的对象,类的自身指针,自身类对象的引用(私有的如何初始化呢,所以不行,换成静态的可以),自身类对象(构造时如何初始化呢?) class A{ public: A(){} A ...
- 蓝桥杯：排它平方数-java
问题描述: 小明正看着 203879 这个数字发呆.原来,203879 * 203879 = 41566646641这有什么神奇呢?仔细观察,203879 是个6位数,并且它的每个数位上的数字都是不同 ...
- JavaScript-打开新窗口（window.open）和 关闭窗口（window.close）
JavaScript-打开新窗口 open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选 ...
- Cocos2d-x之物理引擎
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 在很多的游戏设计中一般都会涉及和模拟到真实的物理世界.然而游戏中模拟真实世界的物理会很复杂.使用已经写好的物理引擎会用很大的帮助和便利. ...
- 推荐系统之隐语义模型LFM
LFM(latent factor model)隐语义模型,这也是在推荐系统中应用相当普遍的一种模型.那这种模型跟ItemCF或UserCF的不同在于: 对于UserCF,我们可以先计算和目标用户兴趣 ...
- vue - blog开发学习6
1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuescroll cnpm instal ...
- 41.Validate Binary Search Tree（判断是否为二叉搜索树）
Level: Medium 题目描述: Given a binary tree, determine if it is a valid binary search tree (BST). Assu ...