Это два моих флексбокса, один для текста, а другой для ссылок на категории. Я пытаюсь расположить изображения категорий как 2 на 2. Я пытался использовать перенос строк и центрировать содержимое, но это не сработало. Я также использовал различные методы с использованием контейнеров, но он всегда заканчивается 1 x 4 ... Кроме того, я пытаюсь навести опцию, чтобы она идеально вписывалась в изображение, но почему-то у меня фоновое изображение при наведении не идеально подходит к изображению, хотя его высота и ширина установлены на 100%.
Как я могу решить эти проблемы?

.flex-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 800px;
}

.flex-container > div {
    margin: 10px;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    flex-flow: row wrap;
}

.one {
    flex: 1 1 auto;
}

.two {
    flex: 1 1 auto;
}

div.two a > img {
    padding: 10px;
    margin: 10px;
}

a {
    text-decoration: none;
}

h1 {
    display: block;
    font-size: 1.3em;
    margin: 0.67em 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 0.8em;
    margin: 0.83em 0;
    font-weight: bold;
}

.container {
    position: relative;
    width: 50%;
}

.image {
    display: block;
    width: 200%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: darkorchid;
}

.container:hover .overlay {
    opacity: 1;
}

.text {
    color: Black;
    font-size: 18px;
    position: absolute;
    top: 30%;
    left: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
<section>
    <div class="flex-container">
        <div class="one"> <h1> Welcome to Delicious Book store, <br>
            where you can find so many delicious food!</h1>
        <p> As a specialized book store, we have many cooking books on
            holiday specials, vegetarian, desserts and cultural cuisines!</p>
        </div>

        <div class="two"> <h2> Shop By Category </h2>

            <div class="container">
                <a href="category.html">
                    <img src="images/categories/holiday.jpg" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Holiday</div>
                    </div></a>
            </div>

            <div class="container">
                <a href="category.html">
                    <img src="images/categories/holiday.jpg" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Dessert</div>
                    </div></a>
            </div>
            <div class="container">
                <a href="category.html">
                    <img src="images/categories/holiday.jpg" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Vegetarian</div>
                    </div></a>
            </div>
            <div class="container">
                <a href="category.html">
                    <img src="images/categories/holiday.jpg" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Cultural Cuisine</div>
                    </div></a>
            </div>

        </div>

    </div>

</section>
0
sarah kim 8 Окт 2020 в 21:03

1 ответ

Лучший ответ

Я обернул ваши ящики гибким контейнером и изменил некоторые CSS в отношении ширины ящиков и их содержимого. Также добавил width: 100% в ваш .flex-container.

.flex-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}

.flex-container > div {
    margin: 10px;
    padding: 20px;
    font-size: 20px;
    text-align: center;
    flex-flow: row wrap;
    width: 500%;
}

.one {
    flex: 1 1 auto;
}

.two {
    flex: 1 1 auto;
}


a {
    text-decoration: none;
}

h1 {
    display: block;
    font-size: 1.3em;
    margin: 0.67em 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 0.8em;
    margin: 0.83em 0;
    font-weight: bold;
}

.container {
    position: relative;
    width: calc(50% - 20px);
    margin: 10px;
}

.image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 75px;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: darkorchid;
    min-height: 75px;
}

.container:hover .overlay {
    opacity: 1;
}

.text {
    color: Black;
    font-size: 18px;
    position: relative;
    text-align: center;
    padding: 10px;
}

.images-container{
    display: flex;
    flex-wrap: wrap;
}
<section>
    <div class="flex-container">
        <div class="one"> <h1> Welcome to Delicious Book store, <br>
            where you can find so many delicious food!</h1>
        <p> As a specialized book store, we have many cooking books on
            holiday specials, vegetarian, desserts and cultural cuisines!</p>
        </div>

        <div class="two"> <h2> Shop By Category </h2>
          <div class="images-container">
            <div class="container">
                <a href="category.html">
                    <img src="https://via.placeholder.com/150" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Holiday</div>
                    </div></a>
            </div>

            <div class="container">
                <a href="category.html">
                    <img src="https://via.placeholder.com/150" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Dessert</div>
                    </div></a>
            </div>
            <div class="container">
                <a href="category.html">
                    <img src="https://via.placeholder.com/150" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Vegetarian</div>
                    </div></a>
            </div>
            <div class="container">
                <a href="category.html">
                    <img src="https://via.placeholder.com/150" alt="holiday image" class="image">
                    <div class="overlay">
                        <div class="text">Cultural Cuisine</div>
                    </div></a>
            </div>
           </div>
        </div>

    </div>

</section>
0
Asaf 8 Окт 2020 в 18:41