使div与祖父母的宽度相同

问题描述 投票：0回答：1

我正在做一个学校项目，目标是建立一个网站，显示从数据库收集的电影。单击电影时，下面会打开一个小描述框。我遇到的问题是出现的框与电影框的宽度相同，而我希望它占据该行的全部空间。请参阅图片进行说明。问题说明 这是我的代码中有问题的部分。它由两个 React 组件和一个 css 文件组成

type here
import { useState } from 'react';
import FilmBild from './assets/filmBild.jpg';
import SingleMovieGridElement from "./SingleMovieGridElement.jsx";

function MovieGrid() {

    const [selectedMovieId, setSelectedMovieId] = useState(null);

    const handleMovieClick = (movieId) => {
        if (selectedMovieId === movieId) {
            setSelectedMovieId(null); // Om samma film klickas igen, stäng av beskrivningen
        } else {
            setSelectedMovieId(movieId);
        }
    };

    return (
        <div className="container">
            <div className="row gx-4 gy-4"> {/* gx-4 ger horisontell space, gy-4 ger vertikal space */}

                <SingleMovieGridElement handleMovieClick={handleMovieClick} selectedMovieId={selectedMovieId} />
                <div className="card mt-2 movie-description">

                </div>

            </div>
        </div>
    );
}



{/*

*/}
export default MovieGrid;


import { useOutletContext } from 'react-router-dom';
import { useLoaderData } from 'react-router-dom';
//import {useState} from "react";


function SingleMovieGridElement({handleMovieClick, selectedMovieId}) {

    //const [handleMovieClick, selectedMovieId] = useOutletContext()

    const movies = useLoaderData();
    console.log("filmer")
    console.log(movies)

    return(

        <>

        {movies.map((movie) => (
                <div key={movie.details.id} className="col-lg-4 col-md-6 col-sm-12">
                    <div className="card">
                        <img
                            src={`https://image.tmdb.org/t/p/original/${movie.details["poster_path"]}`}
                            className="card-img-top img-fluid"
                            alt={movie.details["original_title"]}
                            onClick={() => handleMovieClick(movie.details.id)} // Klicka för att visa beskrivningen
                        />
                        <div className="card-body">
                            <h5 className="card-title"
                                style={{ fontSize:'1rem' }}>
                                {movie.details["original_title"]}</h5>
                        </div>
                    </div>

                    {/* Shows description for the selcted movie */}
                    {selectedMovieId === movie.details.id && (
                        <div className="card mt-2 movie-description">
                            <div className="card-body">
                                <p>{movie.details["overview"]}</p>
                            </div>
                        </div>
                    )}
                </div>
            ))}
    </>)
}

export default SingleMovieGridElement;

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}


.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 350px; 
}

.card-img-top {
  max-height: 200px;
  object-fit: cover; 
}

.card-body {
  flex: 1; 
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.card-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal; 
  height: 50px;  
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
}

.card-body p {
  flex: 1;
  font-size: 0.875rem;
  color: #666;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal; 
  height: 70px; 
}



.movie-description {
  width: 100%; 
  height: 300px; 
  overflow-y: auto; 
}

.row {
  position: relative;
}

我尝试过将电影描述的位置设置为绝对和左：0；并将 .row 的位置设置为相对位置，以便它填充空间。这种修复了宽度部分，有点偏离，但并不可怕。然而问题是电影框的其余部分最终位于描述框的顶部。我认为问题的很大一部分是描述框在某种意义上被电影框的大小所包含，因此它是有问题的。这是我的第一门网络编程课程，所以我对此很陌生。非常感谢任何帮助。

javascript html css reactjs
1个回答
0
投票

从您的问题和提供的片段中我了解到您有一个带有电影卡的网格布局。每张卡片都可以展开以显示说明，并且说明应跨越行的整个宽度。

现在您遇到的问题是描述框受到单个电影卡宽度的限制，并且使用 

position: absolute
会导致与其他元素重叠。

那么，如何正确修复它。我建议你

  • 使用单独的组件来进行跨越整行的描述。
  • 将描述移至单个卡片组件之外。
  • 实现一个状态来控制显示哪部电影的描述。

示例片段也可能适合您。 更新 MovieGrid 、 SingleMovieGridElement 并创建一个名为 MovieDescriptionx 的新组件

// MovieGrid.jsx
import { useState } from 'react';
import FilmBild from './assets/filmBild.jpg';
import SingleMovieGridElement from "./SingleMovieGridElement.jsx";
import MovieDescription from "./MovieDescription.jsx";

function MovieGrid() {
    const [selectedMovieId, setSelectedMovieId] = useState(null);
    const [selectedMovieDetails, setSelectedMovieDetails] = useState(null);

    const handleMovieClick = (movieId, movieDetails) => {
        if (selectedMovieId === movieId) {
            setSelectedMovieId(null);
            setSelectedMovieDetails(null);
        } else {
            setSelectedMovieId(movieId);
            setSelectedMovieDetails(movieDetails);
        }
    };

    return (
        <div className="container">
            <div className="row gx-4 gy-4">
                <SingleMovieGridElement handleMovieClick={handleMovieClick} />
            </div>
            {selectedMovieDetails && (
                <MovieDescription movieDetails={selectedMovieDetails} />
            )}
        </div>
    );
}

export default MovieGrid;


// SingleMovieGridElement.jsx:
import { useLoaderData } from 'react-router-dom';

function SingleMovieGridElement({ handleMovieClick }) {
    const movies = useLoaderData();

    return (
        <>
            {movies.map((movie) => (
                <div key={movie.details.id} className="col-lg-4 col-md-6 col-sm-12">
                    <div className="card">
                        <img
                            src={`https://image.tmdb.org/t/p/original/${movie.details["poster_path"]}`}
                            className="card-img-top img-fluid"
                            alt={movie.details["original_title"]}
                            onClick={() => handleMovieClick(movie.details.id, movie.details)}
                        />
                        <div className="card-body">
                            <h5 className="card-title" style={{ fontSize: '1rem' }}>
                                {movie.details["original_title"]}
                            </h5>
                        </div>
                    </div>
                </div>
            ))}
        </>
    );
}

export default SingleMovieGridElement;

// MovieDescription.jsx
function MovieDescription({ movieDetails }) {
    return (
        <div className="col-12 mt-4 movie-description">
            <div className="card">
                <div className="card-body">
                    <h5 className="card-title">{movieDetails["original_title"]}</h5>
                    <p>{movieDetails["overview"]}</p>
                </div>
            </div>
        </div>
    );
}

export default MovieDescription;

/* index.css */
/* ... existing styles ... */

.movie-description {
    width: 100%;
    height: auto; /* Changed from fixed height */
    overflow-y: hidden; /* Removed scroll */
}

.row {
    position: relative;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.