0

Подскажите, в чем проблема? Каким образом контейнер skills начинает накладываться на предыдущий контейнер team, если выставить второму display flex? При любом другом значении display все нормально, skills располагается дальше по странице снизу введите сюда описание изображения

/* Team */
.team-cards {
    width: 60%;
    margin: auto;
    display: flex;
}
.spec-card {
    margin-right: 40px;
}
.spec-card:last-child {
    margin-right: 0;
}
.spec-card h4 {
    font-size: 15pt;
    margin-bottom: 5px;
}
.spec-card h5 {
    font-size: 14.5pt;
    font-weight: normal;
}
.spec-card p {
    width: 100%;
    margin-top: 30px;
    font-size: 13pt;
}
.spec-card .img {
    height: 110%;
    width: 100%;
    background-color: #666;
    margin-bottom: 25px;
}
.spec-links img {
    height: 20px;
    margin-top: 30px;
    margin-right: 5px;
}
.spec-links img:hover {
    opacity: 0.5;
}
/* ____ */
/* У skills кроме шрифта стилей больше нет */
<div class="team">
  <h2>Our Team</h2>
    <p id="italic">Aliquam dapibus massa diam, eu porta ipsum mollis vel. Etiam blandit auctor</p>
    <div class="team-cards">
    <div class="first-card spec-card">
      <div class="img"></div>
                <h4>Richard Jones</h4>
                <h5>Android Developer</h5>
                <p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
                <div class="spec-links">
                        <a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
                        <a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
                        <a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
                        <a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
                </div>
            </div>
            <div class="second-card spec-card">
                <div class="img"></div>
                <h4>Megan Turner</h4>
                <h5>Print Designer</h5>
                <p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>

                <div class="spec-links">
                        <a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
                        <a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
                        <a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
                        <a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
                </div>
            </div>
                <div class="third-card spec-card">
                    <div class="img"></div>
                    <h4>Victor Green</h4>
                    <h5>IT Programmer</h5>
                    <p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
                    <div class="spec-links">
                        <a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
                        <a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
                        <a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
                        <a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
                    </div>
                </div>
                <div class="fourth-card spec-card">
                    <div class="img"></div>
                    <h4>Amy Watkins</h4>
                    <h5>Digital Marketing Specialist</h5>
                    <p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
                    <div class="spec-links">
                        <a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
                        <a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
                        <a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
                        <a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="skills">
            <h2>Our Skills</h2>
        </div>

6
  • В показанном примере он и без флекса тоже накладывается...
    – andreymal
    8 сен 2021 в 0:54
  • 1
    А вообще причина всех проблем скорее всего в height: 110% так как вы создали бесконечную рекурсию
    – andreymal
    8 сен 2021 в 1:00
  • @andreymal про какую рекурсию идет речь? объясните, пожалуйста 8 сен 2021 в 4:54
  • @andreymal нет, например при grid или block наложения нет 8 сен 2021 в 10:54
  • Да и высота 110% здесь тоже не решает, хотя избавиться от нее стоит все равно 8 сен 2021 в 10:55

1 ответ 1

0

@andreymal прав, всё дело в height: 110%. img которому задано это свойство не является прямым потомком flex-контейнера, поэтому он и выпадает из потока.
Кроме очевидного убрать height: 110%, можно попробовать задать свойство overflow .spec-card.

.spec-card {        
    margin-right: 40px;
    overflow: hidden;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.