Текст наложение границы нижнего div - PullRequest
Новая
       11

Текст наложение границы нижнего div

0 голосов
/ 06 сентября 2018

У меня есть три div: div 1 содержит изображение, div 2 имеет рамку, div 3 содержит текст: 

<div id="div-1">
    <div class="item1"></div>
    <div class="item2">
        <img src="dsc00895-1.jpg">
    </div>
    <div class="item3"></div>
</div>
<div id="div-2">
</div>
<div id="div-3">
    <div class="item1"></div>
    <div class="item2">
        <p>abcdefghiklmnopqrst abcdefghiklmnopqrst</p>
    </div>
    <div class="item3"></div>
</div>

и css: 

#div-1 {
    display: flex;
    flex-wrap: wrap;
}
#div-1 > .item1, #div-1 > .item3{
    border-bottom: 3px solid red;
    width: 450px;
}
#div-1 > .item2 {
    flex-grow: 1;
}
#div-1 > .item2 > img {
    width: 250px;
    display: block;
    margin: auto;
    position: relative;
    top: 60px;
}
#div-2 {
    height: 200px;
    border-left: 3px solid red;
    border-right: 3px solid red;
}
#div-3 {
    display: flex;
    flex-wrap: wrap;
}

#div-3 > .item1, #div-3 > .item3{
    border-top: 3px solid red;
    width: 150px;
}

#div-3 > .item2 {
    flex-grow: 1;
}

#div-3 > .item2 > p {
    text-transform: uppercase;
    font-size: 36px;
    border: 1px solid red;
    text-align: center;
    margin-top: -20px;
}

enter image description here Я хочу, чтобы при изменении содержимого содержимого div 3 нижняя граница div 2 была сокращена. Я использую display : flex, чтобы заказать столбец, содержащий текст, изображение и другой столбец для отображения границы. Но в столбце 1, 3 устанавливается фиксированная ширина, поэтому ширина столбца 2 не устанавливается автоматически.

Как я могу редактировать CSS, если ширина содержимого содержимого автоматически?

1 Ответ

0 голосов
/ 07 сентября 2018

В css удалите flex-grow из # div-3> .item2 и добавьте flex-grow: 1; на # div-3> .item1, # div-3> .item3, и это решит проблему. 

 #div-3 {
       display: flex;
       flex-wrap: wrap;
    }

    #div-3 > .item1, #div-3 > .item3{
       border-top: 3px solid red;
       width: 150px;
       flex-grow: 1;
    }

    #div-3 > .item2 {

    }

    #div-3 > .item2 > p {
       text-transform: uppercase;
       font-size: 36px;
       border: 1px solid red;
       text-align: center;
       margin-top: -20px;
    }
...