基于视口变化的图像旁边按钮的CSS对齐答案

【问题标题】：CSS Alignment of button next to Image based on view port changes基于视口变化的图像旁边按钮的CSS对齐
【发布时间】：2017-01-08 11:20:04
【问题描述】：

我有一个按钮，旁边是横幅 div 中的图像。图像大小为 1024 x 83，当我以普通视图查看页面时，按钮旁边的按钮排成一行就好了。但是，当我将视口调整到 1024 像素以下时，图像文件会落在按钮下方，但会适当缩放。我想将图像保留在按钮旁边，而不是放在按钮下方。这是我的 HTML：

<div id="banner-top">
    <a class="btn btn-danger" id="back-button" role="button">Back</a>
    <img class="banner-image" src="img/banner.png">
</div>

这是我现有的 CSS：

#banner-top {
  height: 83px;
  background-color: #CCC;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
 }
 .banner-image {
   max-width: 100%;
   height: auto;
   width: auto;
  }

我尝试添加 float: left;到 .btn-danger 和浮动：对；到 .banner-image，没有喜悦。然后我添加了 display: inline-block;到两个班级。仍然没有喜悦。然后我添加了绝对定位，但仍然没有成功。

【问题讨论】：

标签： html css

【解决方案1】：

你试过给按钮一个固定的宽度

.btn-danger {
  width: 40px;
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
  position: absolute;
 }

并且您的横幅与按钮的宽度保持一致：

.banner-image {
   max-width: 100%;
   height: auto;
   width: auto;
   position: absolute;
   margin-left: 40px;
  }

和绝对定位。这应该可以在不改变你的代码的情况下工作。

JSFiddle 示例：https://jsfiddle.net/g7ajkp9r/

如果没有图像出现/占位符图像的来源网站有时无法正常工作，请尝试重新启动小提琴...

【讨论】：

【解决方案2】：

你可以使用这样的东西...

<div id="banner-top">
  <a class="btn btn-danger" id="back-button" role="button">Back</a>
  <img class="banner-image" src="http://lorempixel.com/1024/83/sports/Dummy-Text">
</div>

<style>
  #banner-top {
    height: 83px;
    background-color: #CCC;
  }

  .btn-danger {
    width: 40px;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    position: absolute;
   }
   .banner-image {
     max-width: calc(100% - 48px);
     height: auto;
     width: auto;
     position: absolute;
     left: 40px;
    }

</style>

这会很好用。

【讨论】：