css 如何使div的大小与其内容相同,而不是扩展到其最大大小?

kulphzqa  于 2023-01-06  发布在  其他
关注(0)|答案(1)|浏览(160)

你好,我正试图使一个系统的文件夹,其中有文件在他们和文件可以拖动他们之间使用这个dragula.js
由于某种原因,文件夹的div扩展到其最大大小,即使内容不需要此大小。

CSS:

.folder::before {
        content: "□הפרדה לקבצים בודדים";
        position: relative;
        top: -90%;
        pointer-events: all;
        background-color: white;
        border-radius: 10px;
        padding: 0.5%;
        left: 1%;
    }

    .folder.clicked::before {
        content: "▇מופרד לקבצים בודדים";
    }

    .folder {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        min-height: 1.5em;
        min-width: var(--card-size);
        background-color: #ddd;
        max-width: 40vw;
        justify-content: flex-start;
        align-items: center;
        margin: 1%;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        min-height: 15vh;
        gap: 0;
        clip-path: polygon(0 0, 30% 0, 34% 10%, 100% 10%, 100% 100%, 0 100%);
        padding-top: 5%;
        overflow: auto;
        max-height: 100%;
        pointer-events: none;
    }

    .folder * {
        
        pointer-events: all;

    }


    .folder .card {
        width: 14%;
        height: auto;
        padding: 1%;
        margin: 1%;
        padding: 0;
        margin-bottom: 0.5%;
        margin-top: 0.5%;
        min-width: 4vw;

    }

超文本:

<div style="background: rgb(255, 204, 203);" class="folder">
         <div class="card" id="12232466521-1" style="border: 5px solid rgb(204, 0, 0);">
            <img id="img10" data-magnify-src="/get_page_from_file/12232466521/1" class="card_img border border-dark zoom" alt="Doc preview not available" loading="lazy" src="/get_page_from_file/12232466521/1">
         </div>
     </div>

有人知道它为什么会这样吗?
我已经坐在这几个小时了,不明白他们为什么要这么做。任何帮助都将不胜感激。
我试过添加和删除宽度属性,它所做的只是改变它可以扩展到的可能宽度,但它仍然扩展到它可以扩展的最大空间。我试过将Flex调整为0 0 auto以自动调整Flex大小,但没有任何效果。

ccrfmcuu

ccrfmcuu1#

尝试在.folder类上添加width: fit-content;。这应该会在此属性上实现您要查找的。Here is the MDN

相关问题