Question

我有各种不同尺寸的图像，我在左上角和右上角覆盖了一个按钮。

左按钮很好，因为图像左对齐，但右按钮不一致。

在Chrome中，按钮显示在IE图像的右上角（正确），按钮显示在包含div的右上角（不正确）。

见附件，任何想法？

HTML：

<div class="center-block results">
   <img src="../assets/dataworks/img/card-test.png" class="img-responsive draggable" />
   <div class="resultOptions">
      <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
      <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
   </div>
</div>

CSS：

.results {
   display: inline-block;
}

.resultOptions {
   position: relative;
   display: block;
   width: 80%;
}

.resultOptions i {
   position: relative;
   padding: 5px;
   margin-top: -120px;
}

IE：

铬：

Answer 1

将图标容器绝对放在图像上，然后根据需要对齐图标。

.results {
  display: inline-block;
  position: relative;
}

.resultOptions {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}

i {
  margin: .5em;
  color:white;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="center-block results">
  <img src="http://www.placebacon.net/400/200?image=0" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>

<div class="center-block results">
  <img src="http://www.placebacon.net/250/210?image=2" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>

Answer 2

在相对定位的父级内使用绝对定位。试图用负边缘推动事物，这样可能容易出错。

body {
  margin: 0;
  display: flex;
}

.group {
  margin: 10px 5px;
  position: relative;
}
.options .option {
  position: absolute;
  width: 20px;
  height: 20px;
}
.options .bookmark {
  top: 5px;
  left: 5px;
  background-color: rebeccapurple;
}
.options .info {
  top: 5px;
  right: 5px;
  background-color: indianred;
}

<div class="group">
  <img src="https://placehold.it/200x300/fc0">
  <div class="options">
    <span class="option bookmark"></span>
    <span class="option info"></span>
  </div>
</div>

<div class="group">
  <img src="https://placehold.it/300x300/fc0">
  <div class="options">
    <span class="option bookmark"></span>
    <span class="option info"></span>
  </div>
</div>

Answer 3

如前所述：二人组：relative / absolute和text-align-last可以一起使用。

.results {
  display: inline-block;
  position: relative;
}

.resultOptions {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  right: 0.5em;
  text-align-last: justify;
  color:blue;
  ;
}

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<div class="center-block results">
  <img src="http://lorempixel.com/150/150" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>
<div class="center-block results">
  <img src="http://lorempixel.com/120/150" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>

Answer 4

我认为你正在尝试错误的方式。您应该尝试使用position css属性来处理这个问题。见https://www.w3schools.com/css/css_positioning.asp

for your right top icon
.resultOptions-left {
   position: absolute;
   top:0px;
   right:0px;
}
for your left top icon
.resultOptions-right {
   position: absolute;
   top:0px;
   left:0px;
}

这应该将div放在It的第一个亲戚

的右上角

Answer 5

我会在按钮上使用绝对定位。图像将填充相对定位的包装div的宽度，然后只用左侧绝对定位按钮：0（或其他）和右：0。现在你可以通过左拉和拉右浮动它们。您需要相对定位包装器以使绝对值正常工作。见my codepen.

<div class="center-block results">
  <img src="http://via.placeholder.com/350x150" class="img-responsive draggable" />
  <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
  <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>

.results {
   display: inline-block;
   position:relative;
}

.resultOptionBookmark, .resultOptionInfo {
   position: absolute;
   padding: 5px;
   top:0;
}

.resultOptionBookmark{
  left:0;
}

.resultOptionInfo{
  right:0;
}

如何动态地将按钮放在不同大小的图像的角落？ CSS

5 个答案: