制作 header 内容的大小

Question

可能是不可能的和愚蠢的问题，但由于我仍处于学习的第一周，这个 CodePen 中可能有这个问题的答案：

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

    .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;
}

 <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>

我想知道是否有某种方法可以使定价 header 与即将到来的 div 大小相同，在扩展中我将需要使其适合更小的尺寸有

时的屏幕

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

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>

制作 header 内容的大小

Making header the size of content

html

css

sizing