Question

我正在尝试创建两个带有标题和两者之间的图像的导航栏。这就是我目前所拥有的：

<!DOCTYPE html>
<html>
<head>
<style>
nav {
  float: right;
}

.site-info {
  float: right;
}
.site-avatar {
  float: right;
  height: 120px;
  margin-left: 15px;
}
</style>
</head>
  <body>
  <header>
    <div class="topbar">
      <nav class="site-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>

      <a href="/"><img class="site-avatar" src="http://i.stack.imgur.com/xkF9Q.jpg"></a>
      
      <div class="site-info">
        <h1><a href="/">Title</a></h1>
        <p class="site-description">Subtitle</p>
      </div>
      
      <nav class="content-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
    </div>
  </header>
  </body>
</html>

我想保持文本，导航栏和图像浮动到右边。

我想要实现的目标的图像：

导航之间的文字和图像

0 个答案: