使标题符合内容的大小

Question

可能是不可能和愚蠢的问题，但由于我还在学习的第一个星期，所以在这个CodePen中可能会有一个问题的答案：

https://codepen.io/indiehjaerta/pen/bYPqwX

＆＃13;

＆＃13;

    .pricingalternative
{ 
    background-color: #FFFFFF;
    border: .1em solid #000000;    
    margin-top: .5em;
    margin-bottom: .5em;
}

.pricingalternative ~ .pricingalternative
{
    margin-left: 1em;
}

.pricingtable
{
    border: .1em solid #000000;
    border-collapse: collapse;
    overflow: hidden;
}

.pricingtable td
{
    border: .1em solid #000000;
    padding: .5em 1em;
}

.flex 
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  align-items: strech;
}
.section-header
{
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    padding: .5em;
    border: 1em solid #000000;
}

＆＃13;

 <main class="main-padding main-pricing">
        <section class="section-header shadow">
            <h2>LIPSUM</h2>
        </section>

        <div class="pricing flex">
            <div class="pricingmargin pricingalternative shadow">
                <table class="pricingtable">
                    <thead>
                        <tr>
                            <th>Ipsum</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="pricingalternative shadow">
                <table class="pricingtable">
                    <thead>
                        <tr>
                            <th>Ipsum</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>


            <div class="pricingalternative shadow">
                <table class="pricingtable">
                    <thead>
                        <tr>
                            <th>Ipsum</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                        <tr>
                            <td>Lorem Ipsum is simply dummy text</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

我想知道是否有某种方法可以使定价标题与div的大小相同，在扩展中，我需要将其设置为适合较小的屏幕，以便< / p>

编辑：我已经接受了答案，但是如果有一种方法我甚至可以解决这个问题：http://prntscr.com/hkkbm1当有2来使标题成为列的宽度时。我也很乐意接受这一点。

Answer 1

试试这个：

CSS：

.pricingalternative
{ 
    background-color: #FFFFFF;
    border: .1em solid #000000;    
    margin-top: .5em;
    margin-bottom: .5em;
}

.pricingalternative ~ .pricingalternative
{
    margin-left: 1em;
}

.pricingtable
{
    border: .1em solid #000000;
    border-collapse: collapse;
    overflow: hidden;
}

.pricingtable td
{
    border: .1em solid #000000;
    padding: .5em 1em;
}

.flex_parent,
.flex_child
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: strech;
}
.section-header
{
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    padding: .5em;
    border: 1em solid #000000;
}

HTML：

<div class="flex_parent">

<main class="main-padding main-pricing">
    <section class="section-header shadow">
        <h2>LIPSUM</h2>
    </section>

    <div class="flex_child">
        <div class="pricingmargin pricingalternative shadow">
            <table class="pricingtable">
                <thead>
                    <tr>
                        <th>Standard</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="pricingalternative shadow">
            <table class="pricingtable">
                <thead>
                    <tr>
                        <th>Premium</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>


        <div class="pricingalternative shadow">
            <table class="pricingtable">
                <thead>
                    <tr>
                        <th>Exclusive</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>