如何制作内联响应元素？

Question

我有以下代码：

<div class="logo-social-box">            <!--Main Container-->
  <div class="logo"></div>               <!--First Div-->
  <div class="social-box"></div>         <!--Second Div-->
</div>

我想在不使用float属性的情况下设置.logo和.social-box内联，并且这些元素应该是响应式的。

Answer 1

使用display: flex

.logo-social-box {
  display: flex;
}

.logo-social-box .logo {
  background: #aaa;
  padding: 5px;
}
.logo-social-box .social-box {
  flex: 1;
  padding: 5px;
  background: #ddd;
}

<div class="logo-social-box">
  <div class="logo">/*First Div*/

  </div>
  <div class="social-box">/*Second Div*/

  </div>
</div>