响应性：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

当您将显示属性设置为内嵌或内嵌块时，您应该设置

cPanel -> Mail Exchanger -> Select your domain -> Select Local Mail Exchanger 为他们。

此外，您无需将宽度设置为24％即可将它们放在一行上。 你需要在父节点上设置vertical-align: middle;，并为每个内联块提供单独的字体大小。

这是因为内联块有一些空白区域，当给出25％的宽度时，它会将它们推到下一行。

＆＃13;

＆＃13;

font size:0

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;