html - 无法在页面的不同侧获得2个div

我无法在同一行上获得2个div，但是其中一个已正确对齐。

.container>* {
  display: inline-block;
  background-color: rgba(0, 0, 0, .85);
}

.menulinks {
  font-size: 50px;
  padding-top: 0px;
  padding-left: 10px;
  text-decoration: none;
  color: blueviolet;
  float: left;
}

.menulinks:hover {
  color: coral;
}

<div class="container">
  <div>
    <img src="assets/logo.png" width="150">
  </div>

  <div align="right">
    <a href="photos.html" class="menulinks">Photos</a>
    <a href="about.html" class="menulinks">About</a>
    <a href="socials.html" class="menulinks">Socials</a>
  </div>
</div>

在我有桌子和东西之前，它一直在工作，但是我认为这样会更容易。它们在同一行上，但是链接不会向右对齐，

最佳答案

其他答案很好地说明您可以使用flexbox实现此目的。

我的答案显示了另一种flexbox方法。如果在最右边的元素上定义margin-left: auto，则即使在徽标旁边有另一个元素，它也总是在右边，请参阅添加的示例内容。

因此，我的答案与其他答案不同，它只是表示解决问题的另一种方法。根据是否需要连续添加更多元素，选择此方法。

.container>* {
  display: inline-block;
  background-color: rgba(0, 0, 0, .85);
}

.menulinks {
  font-size: 50px;
  padding-top: 0px;
  padding-left: 10px;
  text-decoration: none;
  color: blueviolet;
  float: left;
}

.menulinks:hover {
  color: coral;
}


/*Added CSS*/

.container {
  display: flex
}

.right {
  margin-left: auto;
}

<div class="container">
  <div>
    <img src="assets/logo.png" width="150">
  </div>
 <div style="width: 100px; color: white">
   The links are on the right even if here would be another container (with a Slogan, or some other content)
 </div>

  <div class="right">
    <a href="photos.html" class="menulinks">Photos</a>
    <a href="about.html" class="menulinks">About</a>
    <a href="socials.html" class="menulinks">Socials</a>
  </div>
</div>