css 让图片水平排列,为什么变成梯形了?
import requests
from pathlib import Path
from collections import namedtuple
import csv
from loguru import logger
import io
import numpy
from typing import List, Union
from pathlib import Path
import io
import numpy
from pathlib import Path
from numpy import ndarray
from pydantic import BaseModel, Field
from datetime import datetime, timedelta, timezone
import time
import contextlib
from typing import List, Optional
from numpy import ndarray
from typing import TypeAlias
def time_to_seconds(time_str: str) -> int | None:
try:
hours, minutes, seconds = map(int, time_str.split(":"))
total_seconds = hours * 3600 + minutes * 60 + seconds
return total_seconds
except ValueError:
print("Invalid time format. Please use HH:MM:SS format.")
return None
channel_name_mapping: dict[str, dict[str, str | Path]] = {
'央视综合': {
'path': Path('/vmdata/video/sample/2023/08/17'),
'video_name': '1691794504554885120.mp4',
'npz_name': '1691794504554885120.npz',
'name': '1691794504554885120',
},
'央视新闻': {
'path': Path('/vmdata/video/sample/2023/08/17'),
# 'video_name': '1691795413003346845.mp4',
'video_name': 'CCTV13.mp4',
'npz_name': 'CCTV13.npz',
'name': 'CCTV13',
},
'央视国际': {
'path': Path('/vmdata/video/sample/2023/08/17'),
'video_name': '1691795413003382784.mp4',
'npz_name': '1691795413003382784.npz',
'name': '1691795413003382784',
},
}
channel_name = '央视新闻'
start_time = '2023/8/13 18:58:04'
ad_id = '47965'
d = 50
seconds = time_to_seconds(start_time.split(' ')[-1])
# f'http://192.168.2.15:9002/taiji/{}/{}/{}'
sample_images = []
for i in range(d):
name = channel_name_mapping[channel_name].get('name')
sample_images.append(
f'http://192.168.2.15:9000/taiji/sample/{name}/{seconds+i}.jpg')
meta_images=[]
for i in range(d):
meta_images.append(
f'http://192.168.2.15:9000/taiji/meta/{ad_id}/{i}.jpg')
print(meta_images)
html_content = """
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<style>
.image-container {{
}}
.image-container img {{
float: left;
max-width: 100px;
}}
h1 {{
clear: both;
}}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="image-container">
{sample_image_tags}
</div>
<h1>Image Gallery</h1>
<div class="image-container">
{meta_image_tags}
</div>
</body>
</html>
"""
# 生成图片标签
sample_image_tags = ""
for link in sample_images:
sample_image_tags += f'<img src="{link}" alt="Image"><br>\n'
# 将图片标签插入HTML内容
meta_image_tags = ""
for link in meta_images:
meta_image_tags += f'<img src="{link}" alt="Image"><br>\n'
# 将图片标签插入HTML内容
final_html = html_content.format(meta_image_tags=meta_image_tags,sample_image_tags=sample_image_tags)
# 将HTML内容写入文件
html_filename = "image_gallery.html"
with open(html_filename, "w") as html_file:
html_file.write(final_html)
print(f"HTML file '{html_filename}' generated.")
不应该横着吗?怎么变成梯形了?
回复
1个回答

test
2024-06-28
删掉br会换行,用弹性布局试试
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
}
.image-container img {
max-width: 100px;
margin-right: 10px;
}
h1 {
clear: both;
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="image-container">
{sample_image_tags}
</div>
<h1>Image Gallery</h1>
<div class="image-container">
{meta_image_tags}
</div>
</body>
</html>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容