我怎样才能将我的图像设置在右边？

Question

所以我有这张图片，我想放在右边，但不幸的是，当我尝试使用 pull-right class 时，它卡在了社交媒体图标中，我正在使用 bootstrap 顺便说一句。图片：

我希望它看起来像这样：

编辑：

这是 header 的 jsfiddle link。

Answer 1

如果您正在使用 pull-right class 并且它卡在那里，这意味着父 div 位于那里并且没有导航栏的宽度。我建议您将图片放在具有整个导航栏宽度的 div 中，然后应用 pull-right class。使用 chrome 上的开发工具可以轻松找到 div 确切放置 img 的位置。我希望这有帮助！

抱歉没有将此作为评论发布，我仍然没有 50 个代表。

编辑：这是一个有效的 JSFiddle 修复程序，适用于面临类似问题的任何其他人！

Answer 2

要使中间徽标居中，请应用 justify-content:center; display:flex; width:100%;，要将橙色条向右移动，请应用 position:absolute; top:15px; right:0;。我已经应用了 内联样式 ，所以只需通过 html

/*img{
  width:200px;
  height:200px;
}*/

.navbar-wrapper {
  z-index: 999;
  padding: 0;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  background-color: #1d1d1d;
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
  border: 1px solid #000;
  background-image: -webkit-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: -moz-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: -o-linear-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  background-image: radial-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  position: relative;
}

.social-top {
  float: left;
  left: 8.333%;
  padding: 0;
  border-radius: 0;
  top: 30px;
  position: absolute;
}

.social-top a:before {
  border: none;
  border-radius: 0;
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.social-top a {
  padding: 8px 10px 5px;
  display: block;
  font-size: 17px;
  position: relative;
  float: left;
  margin-right: 5px;
  border: 1px solid #000;
  background-image: radial-gradient(ellipse farthest-corner at center 0px, #31a2a6 -150%, #333240 45%, #333240 85%);
  color: #ff8800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

@media (max-width: 768px) {
  .social-top {
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--HEADER-->
<header>
  <div class="navbar-wrapper">
    <div class="social-top">
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-facebook" style="padding-right: 5px;"></i>
      </a>
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-twitter"></i>
      </a>
      <a rel="nofollow" target="_blank" href="#">
        <i class="fa fa-youtube"></i>
      </a>
    </div>

    <div style="justify-content:center;display:flex;width:100%;">
      <img class="img-responsive" src="https://image.prntscr.com/image/MFOIvVb5TRO8-AgQGFTJAw.png" style="padding: 15px;" alt="Hiraeth logo">
    </div>
    
    <div style="position:absolute;top:0;right:0;">
      <img class="img-responsive" src="https://image.prntscr.com/image/3knsxcoiQ2_pFpe_PcG-sQ.png" alt="Hiraeth logo">
    </div>
  </div>

</header>
<!--END HEADER-->

我怎样才能将我的图像设置在右边？

How can i set my image to be on the right?

html

css

image

css-float