css中.如何使图像标签独占一行?

html-css0257

css中.如何使图像标签独占一行?,第1张

1/6

新建一个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标签的行高你可以随意调,不懂可以追问或私我