div адаптируется к их содержимому и имеет одинаковую ширину? - PullRequest
Новая
       39

div адаптируется к их содержимому и имеет одинаковую ширину?

0 голосов
/ 26 мая 2020

У меня есть 3 коробки, каждая со своим содержимым. В каждой коробке есть width: 20% и min-width: fit-content. Итак, если у меня контент превышает 20%, коробка адаптируется. Однако все поля должны иметь одинаковую ширину. Это означает, что если содержание в блоке превышает 20%, все блоки должны иметь одинаковый размер. [edit 2] Более того, макет содержимого не должен изменяться, он должен быть встроенным. [конец редактирования 2]

Я знаю, что могу сделать это в JavaScript, но мне нужен оптимизированный код, поэтому я избегаю его использования. Итак, как я могу сделать это на чистом CSS (включая Sass), зная, что я знаю содержимое и использую em unit.

Я думал вычислить до визуализации (во время разработки), что будет размером моего текста. Но я не знаю, как это сделать ...

Но, может быть, кто-то знает трюк CSS?

(каждый заинтересованный div находится в гибком родителе)

Редактировать 1 (добавить код): 

    &.experience {
                overflow-x: scroll;
                display: flex;
                justify-content: center;
                align-items: center;

                div.project {
                    display: flex;
                    flex-direction: column;
                    height: 75%;
                    width: 20%;
                    min-width: fit-content;
                    margin: 1em;
                    padding: 1em;
                    border-radius: 1.5em;
                    transition: .3s;
                    color: $color2;

                    div.project__image {
                        flex-grow: 1;
                        margin: 1em 0;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 75% auto;
                    }

                    &.lorem {
                        background-image: linear-gradient(165deg, #bae4b5, #96d68f);

                        div.project__image {
                            background-size: auto 75%;
                        }
                    }

                    &.lorem2 {
                        background-image: linear-gradient(165deg, #6a7ee0, #8595E6);

                        div.project__image {
                        }
                    }

                    &.lorem-impsum {
                        background-image: linear-gradient(165deg, #ffd147, #ffc105);

                        div.project__image {
                        }
                    }

                    &:hover {
                        transition: .3s;
                        transform: scale(1.05);

                        div.explanation {
                            opacity: 1;
                        }
                    }

                    header {
                        h3 {
                            margin: 0;
                            font-size: 1.5em;
                            font-weight: 700;

                            span {
                                font-size: 0.6em;
                                font-weight: 400;
                            }
                        }

                        p {
                            font-size: 0.8em;
                            font-weight: 200;
                        }
                    }

                    a.project__github-btn {
                        display: flex;
                        align-items: center;
                        text-decoration: none;
                        justify-content: flex-end;
                        color: $color2;

                        div {
                            height: 1em;
                            width: 1em;
                            margin-right: 0.3em;
                            @include svg-color("../res/github.svg", $color2);
                        }

                        p {
                            margin: 0;
                        }
                    }
                }
            }

        <section class="experience" id="experience">
           <div class="project lorem-impsum">
                <header>
                    <p>Internship</p>
                    <p>GLOBAL</p>
                    <h3>Lorem Ipsum <span>- December 2018</span></h3>
                </header>
                <div class="project__image"></div>
            </div>
            
            <div class="project lorem">
                <header>
                    <p>Internship</p>
                    <p>MARKETING</p>
                    <h3>Lorem <span>- June 2019</span></h3>
                </header>
                <div class="project__image"></div>
            </div>
            
            <div class="project lorem2">
                <header>
                    <p>Project</p>
                    <p>HTML - CSS - JS - VUEJS</p>
                    <h3>Lorem <span>- March 2020</span></h3>
                </header>
                <div class="project__image"></div>
                <a href="#" class="project__github-btn">
                    <div></div>
                    <p>Voir sur GitHub</p>
                </a>
            </div>
        </section>
...