Отзывчивость: div изменяет размеры в зависимости от встроенного div

Question

Первый элемент div обращен вниз, у меня была такая проблема, и я не мог ее понять, я просто делаю простую разметку сетки 24% | 50% | 24%, но, как вы видите, первый div делает странную вещь, если вы решите его и объясните, почему это явление происходит, и правильно ли я делаю эту простую сетку, пожалуйста, выскажите свое мнение, спасибо заранее.

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 25px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.nav-top {
  width: 100%;
  background-color: #f00000;
}

.row {
  width: 100%;
  display: inline-block;
  color: #fff;
  border: 1px solid gray;
}

.row p {
  font-size: 90%;
  float: left;
}

.nav-top-col-sm {
  width: 24%;
  display: inline-block;
}

.nav-top-col-sm span {
  float: right;
}

.nav-top-col-lg {
  width: 50%;
  display: inline-block;
  background-color: black;
}

<nav class="nav-top">
  <div class="row">
    <div class="nav-top-col-sm">
      <span>En</span>
    </div>
    <div class="nav-top-col-lg">
      <p>FB,Twitter,Google,Wifi,Youtube</p>
      <p>market</p>
    </div>
    <div class="nav-top-col-sm">
      <p>My Account</p>
    </div>
    <!-- Col-->
  </div>
  <!-- Row -->
</nav>

Answer 1

Когда вы устанавливаете свойство отображения на встроенный или встроенный блок , вы должны установить

vertical-align: middle; для них.

Также вам не нужно устанавливать ширину в 24%, чтобы получить их на одной строке. Вам нужно установить font size:0 на родительском элементе и дать индивидуальный размер шрифта для каждого встроенного блока.

Это происходит потому, что у встроенных блоков есть пробел, который выталкивает их на следующей строке, когда задана ширина 25%.

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 25px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.nav-top {
  width: 100%;
  background-color: #f00000;
}

.row {
  width: 100%;
  display: inline-block;
  color: #fff;
  border: 1px solid gray;
}

.row p {
  font-size: 90%;
  float: left;
}

.nav-top-col-sm {
  width: 24%;
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
}

.nav-top-col-sm span {
  float: right;
}

.nav-top-col-lg {
  width: 50%;
  display: inline-block;
  background-color: black;
  vertical-align: middle;
  font-size: 20px;
}

<nav class="nav-top">
  <div class="row">
    <div class="nav-top-col-sm">
      <span>En</span>
    </div>
    <div class="nav-top-col-lg">
      <p>FB,Twitter,Google,Wifi,Youtube</p>
      <p>market</p>
    </div>
    <div class="nav-top-col-sm">
      <p>My Account</p>
    </div>
    <!-- Col-->
  </div>
  <!-- Row -->
</nav>