高度相同的盒子（格）

Question

您好，因為您在圖片中看到的框高度不同。 我不知道為什么會這樣。 我將不勝感激。

這是我的代碼：

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

CSS：

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

.box-title {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    background-color: #0E508C;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.box-body {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #023767;
    color: #fff;
    font-size: 16px;
}

*對不起英語不好...此Google翻譯

Answer 1

您沒有.box高度字段。 您所有的盒子都在動態創建其高度以適合其內容。 嘗試設置高度值。 例：

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

Answer 2

如果您願意使用flex，它可能會有所幫助。

添加一個顯示為flex box的包裝器，然后將直接子級也顯示為flexbox，但在列中。

 .flex { text-align: center; font-weight: bold; direction: rtl; display: flex; } .flex>.box { display: flex; flex-direction: column; flex: 1; } .box { } .box-title { margin-top: 10px; margin-left: 10px; margin-right: 10px; padding: 10px; background-color: #0E508C; color: #fff; font-size: 22px; font-weight: bold; text-align: center; } .box-body { margin-left: 10px; margin-right: 10px; margin-bottom:10px; padding: 10px; background-color: #023767; color: #fff; font-size: 16px; flex:1; } 

 <div class="flex"> <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>