相同高度的框（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，它可能会有所帮助。

添加显示为弹性框的包装器，然后也将直接子项显示为弹性框，但在列中。

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

相同高度的框（div）

Boxes (divs) in the same height

html

css

height