相同高度的盒子（div）

Click here to see the image 相同高度的盒子（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>

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

*對不起，我的英文不好...這個谷歌翻譯

來源

2016-02-11 Ben

如果您願意使用flex，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>

來源

2016-02-11 19:20:20

謝謝你這麼多它真的幫了我！:) – Ben

@Ben歡迎你，不要猶豫，去看看教程和牢記使用這個網站http://caniuse.com用於flex http://caniuse.com/#search=flex所以你知道你是否面臨錯誤或不支持的情況;） –

你沒有高度場的.box。所有的箱子都在動態創建高度以適應其內容。嘗試設置高度值。例如：

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

來源

2016-02-11 18:53:27

同problam :( – Ben

相同高度的盒子（div）

回答

相關問題