css怎么设置图片和文字在同一行

html-css022

css怎么设置图片和文字在同一行,第1张

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

方法和详细的操作步骤如下:

1、第一步,创建一个新的html文件,并将其命名为test.html进行演示,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,创建一个div模块并将其class属性设置为mydiv,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,使用img图片标签创建两个图片,并且src属性指向不同的图片路径,见下图,转到下面的步骤。

4、第四步,执行完上面的操作之后,使用“

 *”初始化页面上所有元素的css样式,将内部边距设置为0,将外部边距设置为0,见下图,转到下面的步骤。

5、第五步,执行完上面的操作之后,设置div的样式,将其宽度设置为700px,将高度设置为400px,边框设置为1px,居中对齐,见下图,转到下面的步骤。

6、第六步,执行完上面的操作之后,设置图片的大小,宽度为280px,高度为200px。

 为了使用图片的水平排列,需要使用float属性设置图片浮动的统一方向,见下图,转到下面的步骤。

7、第七步,执行完上面的操作之后,在浏览器中打开“test.html”文件,两张连续的图片已经在同一行,见下图。这样,就解决了这个问题了。