css 显示:Flex;没有使图片并排[关闭]

chhkpiq4  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(129)

**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
昨天关门了。
Improve this question
当我启动react应用程序时,它不会并排显示图片-我的Row.js文件-

import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css';

const base_url = "https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl }) {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(fetchUrl);
            setMovies(request.data.results);
            return request;
        }
        fetchData();
    }, [fetchUrl]);

    console.table(movies);

    return (
        <div className="row">
            <h2>{title}</h2>

            <div classname="row_posters">
                {/* several row_poster(s) */}

                {movies.map(movie => (
                    <img
                        className="row_poster"
                        src={`${base_url}${movie.poster_path}`} 
                        alt={movie.name} 
                    />
                ))}
            </div>
        </div>
    );
}

export default Row

我的Row.css文件-

.row_posters {
    display: flex
}

.row_poster {
    object-fit: contain;
    width: 100%;
    max-height: 100px;
    margin-right: 10px;
    transition: transform 450ms;
}

它只显示图片下降,而不是并排。我已经提供了一张图片下面的什么显示现在。我希望图片并排去,但它只显示直线下降。

anauzrmj

anauzrmj1#

作为回应,我们提供这样的className,而不是像classname...
类名=“行海报”应替换为类名=“行海报”

相关问题