css代码思考:display和float
2024-10-07 16:57:03
关于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挤带边框的三角
- virtualenv 安装 lxml
- iOS 限制UITextField输入字符
- 去除 waring Method &#39;CreateNew&#39; hides virtual method of base type &#39;TCustomForm&#39;
- 利用JPEGImageEncoder进行简单的图片压缩
- Java中的局部内部类
- spark使用总结
- cin\cout输入输出控制
- each遍历的用法
- hive指定hadoop执行队列
- [Swift]LeetCode927. 三等分 | Three Equal Parts
- leetcode — distinct-subsequences
- DWM1000 三基站一标签定位HEX
- 找bug hhh
- 转载:2.2.2 配置项的语法格式《深入理解Nginx》(陶辉)
- 被查封7周之后,全球最大BT网站&ldquo;海盗湾&rdquo;又重新活过来了【36kr】
- C#如何删除数组中的一个元素
- Python: 正则表达式匹配多行,实现多行匹配模式
- Java堆外内存之六:堆外内存溢出问题排查
- <;Android 基础(二十八)>; Fragment (1)