css 让图片水平排列,为什么变成梯形了?

作者站长头像
站长
· 阅读数 10
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.")

css 让图片水平排列,为什么变成梯形了?

不应该横着吗?怎么变成梯形了?

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