清除浮动的办法
<style>
*{
margin: 0;
padding: 0;
}
.clearfix:after{
content: "";
display:block;
height: 0;
overflow: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}
.left{
width: 214px;
height: 192px;
border: 3px solid red;
margin:10px;
}
.left_in{
width: 208px;
height: 186px;
border: 3px solid #ccc ;
}
.left_in h2{
background: url(imgs/left_title2.png) no-repeat center right;
font-size: 14px;
width:206px;
height: 33px;
line-height: 33px;
border-bottom: 1px dotted #CBCBCB;
border: 1px solid red;
}
.left_in h2 span{
display: block;
background: url(imgs/left1.png) no-repeat center;
height:33px;
width:25px;
margin-right: 20px;
border: 1px solid red;
float:left;
}
</style>
</head>
<body>
<div class='left'>
<div class="left_in">
<h2 class="clearfix"><span></span>标题</h2>
内容
</div>
</div>
</body>
</html>
显示的是
1.为什么“内容“不是在下面靠左边的位置呢，
2.（1）.
当我把.left_in h2 span里的display:block换成display:inline-block，去掉float:left时，就会出现"标题"下沉的情况，但‘内容’就正常了，显示是：
（2）
.当把h2中的height去掉，只保留line-height:33px;时，h2就变宽了，就会出现这种情况
（3）.
当设置h2的margin-top:-5px;时，也不行。出现如下
应该怎样写才能让”标题“出现在蓝色条的中间，内容也能正常靠左边显示呢。
大神帮帮忙！
thrmagic4回答
-
玩意11
.left_in h2 { background: url(imgs/left_title2.png) no-repeat center right; font-size: 14px; width: 206px; height: 33px; line-height: 33px; border-bottom: 1px dotted #CBCBCB; border: 1px solid red;}把高度height:33px;去掉就好了 -
阿贾大魔王
写出来的效果是这样：标题在中间，内容左边显示，希望对你有帮助，望采纳！
随时随地看视频慕课网APP
Html/CSS