Html 相同高度的盒子（div）

您好，因为您在图片中看到的盒子高度不同。我不知道为什么会这样。我将非常感谢您给予的任何帮助

这是我的密码：

<div style='text-align: center; font-weight: bold;' dir='rtl'>
    <div class='box' style='width: auto;'>
        <div class='box-title top-rounded'>מערכת משתמשים</div>
        <div class='box-body bottom-rounded'>
            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>בסיסית</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p>הרשמה והתחברות</p>
                    <p>התחברות אוטומטית</p>
                </div>
            </div>

            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>מתקדמת</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p style='color: #000;'>חבילה בסיסית</p>
                    <p>פרופיל<p>
                </div>
            </div>
        </div>
    </div>

    <div class='box' style='width: auto;'>
        <div class='box-title top-rounded'>מערכת הריגות</div>
        <div class='box-body bottom-rounded'>
            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>בסיסית</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p>רמות</p>
                </div>
            </div>

            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>מתקדמת</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p style='color: #000;'>חבילה בסיסית</p>
                    <p>סטאטס</p>
                </div>
            </div>
        </div>
    </div>

    <div class='box' style='width: auto;'>
        <div class='box-title top-rounded'>מערכת מכוניות</div>
        <div class='box-body bottom-rounded'>
            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>בסיסית</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p>רכבים ציבורים ורגילים</p>
                </div>
            </div>

            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>מתקדמת</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p style='color: #000;'>חבילה בסיסית</p>
                    <p>רכבים מיוחדים ולאדמינים בלבד (רקון)<p>
                </div>
            </div>
        </div>
    </div>

    <div class='box' style='width: auto;'>
        <div class='box-title top-rounded'>מערכת קלאנים</div>
        <div class='box-body bottom-rounded'>
            <div class='box' style='display: block;'>
                <div class='box-title top-rounded bottom-rounded full-border'>בסיסית</div>
            </div>

            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>מתקדמת</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p style='color: #000;'>חבילה בסיסית</p>
                    <p>מלחמת קלאנים (קלאן וואר)</p>
                </div>
            </div>
        </div>
    </div>

    <div class='box' style='width: auto;'>
        <div class='box-title top-rounded'>מערכת פעילויות</div>
        <div class='box-body bottom-rounded'>
            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>בסיסית</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p>Minigun</p>
                    <p>War</p>
                    <p>Monster</p>
                    <p>Boom</p>
                    <p>Flame</p>
                    <p>Chain</p>
                    <p>Karting (לא מירוץ)</p>
                </div>
            </div>

            <div class='box' style='display: block;'>
                <div class='box-title top-rounded top-border'>מתקדמת</div>
                <div class='box-body bottom-rounded bottom-border'>
                    <p style='color: #000;'>חבילה בסיסית</p>
                    <p>Sultan Wars</p>
                    <p>Team War</p>
                </div>
            </div>
        </div>
    </div>
</div>

---

*很抱歉英语不好。。。此谷歌翻译

您没有

.box

的高度字段。您的所有箱子都在动态创建其高度以适合其内容。尝试设置高度的值。例如：

.box {
    height: 100%;
    width: 100%;
    display: inline-block;
    direction: rtl;
 }

---

如果您愿意使用flex，它可能会有所帮助

添加一个显示为flex box的包装器，然后将direct Child也显示为flexbox，但以列形式显示

.flex{
文本对齐：居中；
字体大小：粗体；
方向：rtl；
显示器：flex；
}
.flex>.box{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.盒子{
}
.方框标题{
边缘顶部：10px；
左边距：10px；
右边距：10px；
填充：10px；
背景色：#0E508C；
颜色：#fff；
字体大小：22px；
字体大小：粗体；
文本对齐：居中；
}
.箱体{
左边距：10px；
右边距：10px；
边缘底部：10px；
填充：10px；
背景色：#023767；
颜色：#fff；
字体大小：16px；
弹性：1；
}

מערכת משתמשים
בסיסית
השמוותחברות

התבתאטטמטית

מתקדמת
חבילבססית
פרופיל

מערכת הריגות
בסיסית
רמות

מתקדמת
חבילבססית
סטאטס

מערכת מכוניות
בסיסית
ר

מתקדמת
חבילבססית
ר

מערכת קלאנים
בסיסית
מתקדמת
חבילבססית
מ

מערכת פעילויות
בסיסית
微型枪

战争

怪兽

繁荣

火焰

链子

卡丁车运动

מתקדמת
חבילבססית
苏丹战争

团队战争

非常感谢，它真的帮助了我！：）@Ben：不客气，请毫不犹豫地查找教程，并记住使用此flex站点，以便了解您是否面临错误或不受支持的情况；）

.box {
    height: 100%;
    width: 100%;
    display: inline-block;
    direction: rtl;
 }