Коробки (дивы) в одной и той же высоте

Click here to see the image Коробки (дивы) в одной и той же высоте

Здравствуйте, как ящики, которые вы видите на картинке не такой же высоты. Я понятия не имею, почему это так. Буду признателен за любую помощь.

Вот мой код:

<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

источник

2016-02-11 Ben

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

Коробки (дивы) в одной и той же высоте

ответ

Смежные вопросы