首页给我写一个框架里面有4个图片横排的宽度900.高度100

给我写一个框架里面有4个图片横排的宽度900.高度100

时间: 2024-10-23 15:04:45 浏览: 17

这是一个基本的HTML和CSS代码示例，创建一个包含四个等宽（900px）且高为100px的图片横向排列的容器： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> .image-container { display: flex; width: 900px; height: 100px; justify-content: space-between; /* 图片之间留空 */ } img { width: 100%; height: 100%; /* 或者你可以根据实际图片比例设置高度 */ object-fit: cover; /* 保持图片填充整个框，避免变形 */ } </style> </head> <body> <div class="image-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> </body> </html> ``` 在这个例子中： - `.image-container` 是包含所有图片的父级容器，设置了固定宽度900px和高度100px。 - `display: flex` 利用了Flexbox布局，使图片水平排列。 - `justify-content: space-between` 使得图片之间的距离均匀分布。 - 每张图片(`img`)的宽度设为100%，高度采用百分比自动适应容器，`object-fit: cover` 确保图片填充整个显示区域。请将 "src" 属性替换为你的实际图片路径，并确保图片存在。

阅读全文