首页html制作左图右文字下一行左文字右图这样一直相反的列表怎么写

html制作左图右文字下一行左文字右图这样一直相反的列表怎么写

时间: 2024-10-22 14:04:08 浏览: 19

要在HTML中创建一个交替显示左右图片和文本的列表，你可以使用`<div>`元素结合CSS布局来实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; row-gap: 10px; /* 设置行间距 */ } .left-item { width: 45%; /* 图片宽度占总宽度的一半 */ float: left; } .right-item { width: 45%; float: right; } .text-wrap { text-align: justify; /* 文字居中对齐 */ } </style> </head> <body> <ul class="container">  <li class="left-item"> <img src="left_image_url" alt="左图描述">  </li> <li class="right-item text-wrap"> <p>这是右文内容...</p>  </li>  <li class="right-item"> <img src="right_image_url" alt="右图描述"> </li> <li class="left-item text-wrap"> <p>这是左文内容...</p> </li>  </ul> </body> </html> ```

阅读全文