首页html两个图片和文字水平排列

html两个图片和文字水平排列

时间: 2024-10-15 09:26:33 浏览: 18

在HTML中，如果你想将两个图片和一些文字水平排列，可以使用`<div>`标签以及CSS来实现。这里是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; justify-content: space-between; /* 图片分布均匀 */ align-items: center; /* 文字居中 */ } img { margin-right: 10px; /* 图片之间留空隙 */ max-width: 100%; /* 图片自适应容器宽度 */ } </style> </head> <body> <div class="container"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <p>这里是文字描述。</p> </div> </body> </html> ``` 在这个例子中，`.container`设置了`display: flex`使其成为一个flex布局容器，`justify-content: space-between`使得两边的图片等距排列，`align-items: center`让文字垂直居中。每张图片通过`margin-right`控制了它们之间的间距。

阅读全文