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>
