首页一列有一半图片一半文字一半图片一半文字用html和css

一列有一半图片一半文字一半图片一半文字用html和css

时间: 2024-12-29 14:36:09 浏览: 5

要在HTML和CSS中创建这种交替显示图片和文字的效果，你可以使用嵌套的`<div>`元素，并结合CSS的浮动、display属性以及伪元素`:nth-child()`来实现。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-wrap: wrap; } .item { width: calc(50% - 20px); /* 或者你想要的边距值 */ margin: 10px; padding: 10px; } .item img { float: left; width: 100%; } .item p { clear: both; } </style> </head> <body> <div class="container"> <div class="item" style="background-color: #f2f2f2;"> <img src="image1.jpg" alt="图片描述1" /> <p>这是第一行的文字内容。</p> </div>  <div class="item"> <img src="image2.jpg" alt="图片描述2" /> <p>这是第二行的文字内容。</p> </div>  </div> </body> </html> ``` 在这个例子中，`.item` 类的元素会每两行轮换一次，其中包含一张图片和一段文字。通过设置`float`属性，图像会向左浮动，然后清除浮动使下面的内容能正常显示。

阅读全文