在一个盒子里获得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/

Answer 2

如果使用float，浮动项目必须放在＆＃34;常规＆＃34;之前。 DOM树中的（非浮动）项。在这种情况下，您可能希望在<div class="navitems">之前移动<div class="logo">。此外，您可能希望置换<ul>和<li>代码。 <ul>包含<li>，而不是相反。 ;）

Answer 3

2个div仅在1 div中，但事实是float属性不会改变流量.Floated元素仍然是网页流量的一部分，不像绝对和固定定位所以放置div class =＆＃34; navitems＆＃34;在div class =＆＃34; logo＆＃34;上面。然后交换ul和li你在概念上错误地使用它们虽然它在视觉上没有任何区别

Answer 4

首先，在这两个DIV上使用display: inline-block;。另外，在两者上使用vertical-align: middle;将它们垂直对齐到它们的容器中。

但您的代码中存在错误：ul和li应该反过来使用，li s in {{1 }。另请注意，ul仅分配给list-style-type: none;，ul仅分配给display: inline-block;元素。

＆＃13;

＆＃13;

li

＆＃13;

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

.logo {
  display: inline-block;
  padding-left: 31px;
  height: 90px !important;
  width: 90px !important;
  vertical-align: middle;
}
.navitems {
  display: inline-block;
  vertical-align: middle;
}
.navitems ul {
  list-style-type: none;
}
.navitems li {
  display: inline-block;
  margin-right: 4em;
}

＆＃13;

＆＃13;

＆＃13;