时间戳

首页 > 解决方案 > 使弹性部分和一般部分宽度相同

html - 使弹性部分和一般部分宽度相同

问题描述

我有三个部分 A、B 和 C。所有部分的最大宽度为 900 像素，但第三部分比其他两个部分短：https ://codepen.io/Boryamba/pen/oNgjoOe

另外，我希望 C 部分中的 h2 元素高于 div 的文本，但因为这部分是 flex h2 与 div 保持在同一行：https ://codepen.io/Boryamba/pen/bGNVYyZ

问题：如何使所有三个部分的宽度相同？是否可以使用 flexbox 使 C 部分中的 h2 元素位于 div 之上？

.section-head {
    padding-bottom: 1em;
}

#section-a {
    padding         : 1.5em;
    background-color: rgba(0, 139, 139, 0.4);
    color           : #fff;
    text-align      : center;
    max-width       : 900px;
    margin          : 0 auto;
}

#section-b {
    padding         : 1.5em;
    background-color: rgba(139, 139, 139, 0.4);
    color           : #000;
    text-align      : center;
    max-width       : 900px;
    margin          : 0 auto;
}

#section-c {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
}

#section-c .box1, #section-c .box3 {
    background-color: rgba(0, 139, 139, 0.4);
    color: whitesmoke;
    padding: 5px 20px;
}

#section-c .box2 {
    padding: 5px 20px;
    background-color: rgba(139, 139, 139, 0.4);
    color: #000;
}
<section id="section-a">
    <h2 class="section-head">Section A</h2>
    <p>
        Lorem ipsum...
    </p>
</section>
<section id="section-b">
    <h2 class="section-head">Section B</h2>
    <p>
        Lorem ipsum...
    </p>
</section>
<section id="section-c">
    <div class="box1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque nemo adipisci quibusdam
        perferendis provident impedit?</div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis sed velit maiores sequi quibusdam
        autem.</div>
    <div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, animi earum natus mollitia ex magni!
    </div>
</section>

标签： htmlcss

解决方案

要使所有 div 具有相同的宽度，请删除部分 A 和 B 的左右填充，如下所示：

#section-a {
    padding         : 1.5em 0;
    background-color: rgba(0, 139, 139, 0.4);
    color           : #fff;
    text-align      : center;
    max-width       : 900px;
    margin          : 0 auto;
}

#section-b {
    padding         : 1.5em 0;
    background-color: rgba(139, 139, 139, 0.4);
    color           : #000;
    text-align      : center;
    max-width       : 900px;
    margin          : 0 auto;
}

推荐阅读