Html 我怎样才能使我的div彼此保持一致的高度？

我在我的网站上有一系列的滚动链接，我试图让它们保持相同的高度，所以当一个现在必须使用两行时，其他的改变高度以保持一致。我在这里遇到了几个解决方案，我马上就要讨论。首先让我给你看看代码

身体{ 背景色：000； } .全篇{ 宽度：100%； 高度：自动； } .Pro_Qual_s_link_框架{ 保证金：7em0 11em0； 填充：2米0 2米0； 显示：块； } 四分之一{ 宽度：25%； 高度：自动； } .Pro_Qual_s_link_容器{ 浮动：左； 填充：2米0 2米0； 显示：块； } .Pro_Qual_s_link{ 宽度：77%； 保证金：自动； 填充：2米0 2米0； 边界半径：0.44em； 显示：块； 文本对齐：居中； 文字装饰：无； 字体系列：“Roboto”，无衬线； } .颜色、样式、颜色1{ 边缘样式：脊； 边框颜色：888； 边界宽度：.11em； 颜色：E0； 背景色：rgba150、150、150、0.11； 盒影：0 0 3em rgba222、222、222、0.44； 文本阴影：0.01米rgba222、222、222、0.88； } .颜色(风格)1{ 边缘样式：脊； 边框颜色：55ED2B； 边界宽度：.11em； 颜色：B5FFB8； 背景色：rgba10,61,12,0.11； 盒影：0 0 3em rgba137、237、55、0.44； 文本阴影：0.01米rgba137、237、55、0.88； } .颜色_样式_k_1{ 边缘样式：脊； 边界宽度：.11em； 边框颜色：DB3016； 颜色：FFAF69； 背景色：rgba102,0,0,0.11； 文本阴影：0.01米rgba214,73,34,0.88； 盒影：0 0 3em rgba214,73,34,0.44； } .颜色_风格_j_1{ 边缘样式：脊； 边界宽度：.11em； 边框颜色：633191； 颜色：CD9AFC； 背景色：rgba67,3150,0.11； 文本阴影：0 0 1em rgba140、0、255、0.88； 盒影：0 0 3em rgba140,0，255,0.44； }

---

您的解决方案有一些奇怪的边距等，这使得它无法与flex一起工作。下面是一个使用flex的工作示例

身体{ 背景色：000； } * { 框大小：边框框； } .全篇{ 宽度：100%； 高度：自动； 显示器：flex； 柔性包装：包装； 证明内容：之间的空间； } .Pro_Qual_s_link_框架{ 保证金：7em0 11em0； 填充：2米0 2米0； } 四分之一{ 宽度：25%； 高度：自动； 弹性：1； } .Pro_Qual_s_link_容器{ 宽度：25%； 填充：2米0 2米0； 显示：块； } .Pro_Qual_s_link{ 宽度：77%； 身高：100%； 保证金：自动； 填充：2米0 2米0； 边界半径：0.44em； 显示：块； 文本对齐：居中； 文字装饰：无； 字体系列：“Roboto”，无衬线； } .颜色、样式、颜色1{ 边缘样式：脊； 边框颜色：888； 边界宽度：.11em； 颜色：E0； 背景色：rgba150、150、150、0.11； 盒影：0 0 3em rgba222、222、222、0.44； 文本阴影：0.01米rgba222、222、222、0.88； } .颜色(风格)1{ 边缘样式：脊； 边框颜色：55ED2B； 边界宽度：.11em； 颜色：B5FFB8； 背景色：rgba10,61,12,0.11； 盒影：0 0 3em rgba137、237、55、0.44； 文本阴影：0.01米rgba137、237、55、0.88； } .颜色_样式_k_1{ 边缘样式：脊； 边界宽度：.11em； 边框颜色：DB3016； 颜色：FFAF69； 背景色：rgba102,0,0,0.11； 文本阴影：0.01米rgba214,73,34,0.88； 盒影：0 0 3em rgba214,73,34,0.44； } .颜色_风格_j_1{ 边缘样式：脊； 边界宽度：.11em； 边框颜色：633191； 颜色：CD9AFC； 背景色：rgba67,3150,0.11； 文本阴影：0 0 1em rgba140、0、255、0.88； 盒影：0 0 3em rgba140,0，255,0.44； }

---

使用显示表而不是flexbox flexbox的解决方案非常好，但如果您需要IE兼容性，则不能使用它：

HTML

---

我想你需要增加最小高度。专业质量与服务链接{min height:38px；…..您链接了与OP链接的同一个小提琴。该叉子当时一定工作不正常。fiddle.net一回答，我就会创建一个新的。您应该单击小提琴中的“更新”按钮。无论如何，我这样做了并编辑了您的帖子。这就是我所做的。现在我无法显示fiddle.net中的任何页面。可能在y出现问题我们这边，不过在这里很好。

<div id="Personal_Strengths_link_frame" class="full_section  Pro_Qual_s_link_frame">

    <div class="Pro_Qual_s_link_container color_style_k_1">
        <a class="Pro_Qual_s_link" href="#html">
            Back To Top
        </a>
    </div>

    <div class="Pro_Qual_s_link_container color_style_b_1">
        <a class="Pro_Qual_s_link" href="#Specialty_Practices_frame">
            Specialty Practices
        </a>
    </div>

    <div class="Pro_Qual_s_link_container color_style_g_1">
        <a class="Pro_Qual_s_link" href="#Industries_Served_frame">
            Industries I've Served
        </a>
    </div>

    <div class="Pro_Qual_s_link_container color_style_j_1">
        <a class="Pro_Qual_s_link" href="#Tools_of_Choice_frame">
            My Tools Of Choice
        </a>
    </div>

</div>

body{
  background-color: #000;
}

.full_section {
    width: 100%;
    height: auto;
}

.Pro_Qual_s_link_frame {
    margin: 7em 0 11em 0;
    padding: 1em 0 1em 0;
    display: table;
    border-spacing: 30px;
}

.Pro_Qual_s_link_container {
    border-radius: 0.44em;
    border-style: ridge;
    border-width: .11em;
    display: table-cell;
    padding: 2em 0 2em 0;
    width: 25%;
}

.Pro_Qual_s_link {
    display: block;
    color: inherit;
    font-family: 'Roboto', sans-serif;
    margin:auto;
    padding: 2em 0 2em 0;
    text-align: center;
    text-decoration: none;
}

.color_style_b_1 {
    border-color: #888;
    color: #e0e0e0;
    background-color: rgba(150, 150, 150, 0.11);
    box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
    text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}

.color_style_g_1 {
    border-color: #55ED2B;
    color: #B5FFB8;
    background-color: rgba(10, 61, 12, 0.11);
    box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
    text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}

.color_style_k_1 {
    border-color: #DB3016;
    color: #FFAF69;
    background-color: rgba(102, 0, 0, 0.11);
    text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
    box-shadow: 0 0 3em rgba(214, 73, 34,  0.44);
}

.color_style_j_1 {
    border-color: #633191;
    color: #CD9AFC;
    background-color: rgba(67, 3, 150, 0.11);
    text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
    box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}