文字叠加边框底部div答案

【问题标题】：Text overlay border bottom div文字叠加边框底部div
【发布时间】：2018-09-07 14:02:55
【问题描述】：

我有三个 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;
}

我希望当我更改 div 3 的内容文本时，div 2 的边框底部将被缩短。我正在使用display : flex 来订购包含文本、图像和其他列以显示边框的列。但是第 1、3 列要设置固定宽度，所以第 2 列的宽度不会自动设置。

如果内容文本的宽度是自动的，我如何编辑 css？

【问题讨论】：

对不起，我刚刚添加了清除代码。

标签： javascript html css text-align

【解决方案1】：

在 css 中从 #div-3 > .item2 中移除 flex-grow 并添加 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;
    }

【讨论】：