Question

我需要在图像的右上角使用省略号图标。当我们点击下拉菜单时会显示诸如下拉菜单之类的选项。下拉菜单应位于图像的边界。

看起来应该像image

一样。

这是我的代码fiddle

.portfolio-item {
	float: left;
	position: relative;
	width: 32.04%;
    /*width: 25%;*/
    margin-right: 15px;
    margin-bottom: 15px;
	/*height: 300px;*/
    height: auto;
    padding: 0 12px 12px 0;
}
.top-left {
    position: absolute;
    top: 5px;
    left: 5px;
    margin-right: 5px;

}
.top-left a{
    color: white;
    /*display: inline;*/
    /*background-color: black;*/
    /*font-family: 'Times New Roman', serif;*/
    font-weight: bold;
    font-size: 18px;


}
.top-right {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
}
/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 10px;
}
.bottom-left a{
    font-family: 'Times New Roman', serif;
    font-size: 14px;
    color: white;
    /*display: inline;*/
    /*background-color: black;*/
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head><article class="portfolio-item pf-grading pf-asset-management">
   <div class="portfolio-image">
   <a href="#"><img src="https://www.fly-jamaica.com/charters/charter-request-form/400x300.gif/@@images/image.gif" alt="Open Imagination"></a>
<div class="top-left"><a href="#">Any Text here</a></div>
 <a href="#"><div class="top-right"><i class="icon-line-ellipsis"></i></div></a>
  </div>
  </article>

Answer 1

检查以下内容：Updated Fiddle与下面相同更新了相同的代码，可能会很有用。定位完全取决于您

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <style>
        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #555;
            color: white;
            font-size: 16px;
            padding: 12px 24px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            }
    </style>
</head><article class="portfolio-item pf-grading pf-asset-management">
   <div class="portfolio-image">
   <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Btn
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
   <img src="https://www.fly-jamaica.com/charters/charter-request-form/400x300.gif/@@images/image.gif" alt="Open Imagination">
 <a href="#"><div class="top-right"><i class="icon-line-ellipsis"></i></div></a>
  </div>
  </article>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

通过单击图像上的图标进行下拉菜单

1 个答案: