.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”文件,两张连续的图片已经在同一行,见下图。这样,就解决了这个问题了。