Szerokość diva-rodzica nie dopasowuje się do zawartości

bartosz1986

2025-03-15T01:05:33+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 16

0

Witam,
mam następujący problem: chodzi mi o to, że chciałbym aby szerokość diva general-note-my dopasowała się do końca tych małych divów note2. Bo na chwilę obecną ten div zajmuje szerokość na cały ekran a ja bym chciał żeby zajmował dokładnie tyle ile divów się zmieści na ekranie żeby taką miał szerokość i żeby był wyśrodkowany czyli margin 0 auto.
Jeżeli divów note2 jest tylko kilka to wszystko działa jak należy, natomiast jeśli divów note2 jest na 2 rzędy to div general-note-my zajmuje od razu 100% szerokości ekranu i max-width: fit-content; nie działa.

Proszę o pomoc jak to można rozwiązać.

Kopiuj

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <style>
        .note2 {
            background: #fff;
            border-radius: 7px;
            box-shadow: 0 2px 5px #ccc;
            padding: 10px;
            width: 240px;
            height: 200px;
            margin: 16px;
        }
        .general-note-my {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            max-width: fit-content;
            margin: 0 auto;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="border border-success general-note-my">
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
        <div class="note2">
            <div className="note-properties">
                <p className="p-note-bold">TEKST TEKST</p>
                <p className="p-note">ZAWARTIOŚĆ</p>
            </div>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>

</body>

</html>

overcq

2025-03-15T07:31:31+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 402

0

bartosz1986 napisał(a):

chodzi mi o to, że chciałbym aby szerokość diva general-note-my dopasowała się do końca tych małych divów note2. Bo na chwilę obecną ten div zajmuje szerokość na cały ekran a ja bym chciał żeby zajmował dokładnie tyle ile divów się zmieści na ekranie żeby taką miał szerokość i żeby był wyśrodkowany czyli margin 0 auto.

Nie rozumiem algorytmu układania rzędów. Zgodnie z pierwszym zdaniem – jak zasobnik może dostosować swoją szerokość do ostatniego rzędu prostokątów, skoro szerokość ostatniego rzędu prostokątów wynika z ułożenia najpierw poprzednich rzędów?
Jeśli chcesz konkretną szerokość zasobnika, to ją ustaw. A jeśli chcesz, by zasobnik nie miał miejsc pustych w swoim kształcie prostokąta, to potrzeba znaleźć taki iloczyn sztuk w rzędzie i w kolumnie, by w wyniku była liczba wszystkich prostokątów w zasobniku.
Czy może chodzi o coś takiego: https://codepen.io/overcq/pen/MYWrJMr ?