html - 在一个盒子里得到 2 个 Div？

Question

我想知道如何在一个 div 中得到 2 个 div

html {
  margin: auto;
  width: 960px;
  height: auto;
}

#navbar {
  height: 90px;
  background-color: #080808 !important;
  display: block;
}

.logo {
  padding-left: 31px;
  height: 90px !important;
  width: 90px !important;
}

.navitems li,
.navitems ul {
  list-style-type: none;
  display: inline-block;
}

.navitems {
  float: right;
}

<div id="navbar">
  <div class="logo">
    <img src="images/logo.png" alt="" width="90px" height="90px">
  </div>
  <div class="navitems">
    <li>
      <ul><a href="#">Home</a></ul>
      <ul><a href="#team">Contact Us</a></ul>
      <ul><a href="#about">About</a></ul>
    </li>
  </div>
</div>

Answer 1

使用 flex 可能更好。

在父元素(导航器)上设置“display: flex”和“justify-content: space-between”。我还更改了图像，使其背景颜色突出。

html {
  margin: auto;
  width: 960px;
  height: auto;
}

#navbar {
  height: 90px;
  background-color: #080808 !important;
  display: flex;
  justify-content: space-between;
}

img {
  background-color: #0ff;
}

.logo {
  padding-left: 31px;
  height: 90px !important;
  width: 90px !important;
}

.navitems li,
.navitems ul {
  list-style-type: none;
  display: inline-block;
}

<div id="navbar">
  <div class="logo">
    <img width="90px" height="90px">
  </div>
  <div class="navitems">
    <li>
      <ul><a href="#">Home</a></ul>
      <ul><a href="#team">Contact Us</a></ul>
      <ul><a href="#about">About</a></ul>
    </li>
  </div>
</div>

更多关于 flex 属性: https://css-tricks.com/snippets/css/a-guide-to-flexbox/