新建一个html文件,命名为test.html,用于讲解css中如何解决h标签独自占用一行。
2/6
在test.html文件内,使用h3标签创建一行文字,用于测试。
3/6
在test.html文件内,给h3标签添加class属性,设置为myway。
4/6
在css标签内,通过class定义h3标签的样式,使用background属性设置它的背景颜色为红色。
5/6
在css标签内,再将display属性设置为inline,将h3标签转变为内联元素。
6/6
在浏览器打开test.html文件,查看实现的效果。
<style type="text/css">.main{width: 80%margin: 0 autoheight: 100px}
.img{width: 40%float: left}
.img img{height: 100pxmax-width: 100%}
.main p{width: 60%float: leftword-break: break-allline-height: 100px}
</style>
<div class="main">
<div class="img">
<img src="img/xxx.jpg" >
</div>
<p>你的文字</p>
</div>
至于p标签的行高你可以随意调,不懂可以追问或私我