盒子（div）在同一高度

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会有所帮助。

添加一个显示为弹性框的包装，然后将直接子项显示为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>