HTML弹出菜单防止溢出容器

Question

我有以下代码，当单击每个块上的图标时显示弹出菜单，现在对于第三个块，菜单溢出黑色容器，我需要通过将菜单 div 向左侧移动来显示在容器内。只有最后一列菜单需要向左移动以保持容器内的位置。

这怎么可能？

function myFunction(id) {
  document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("edit-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.grid_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
  margin-top: 0px;
  text-align: center;
  margin-top: 10px;
  width: 508px;
  background: black;
}

.grid_block {
  background-color: #269ad3 !important;
  color: #efefef;
  border: 1px solid #ccc;
  width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.edit-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.edit-dropdown-content a {
  color: black;
  padding: 5px 12px 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 14px;
}

.w3-right {
  float: right !important;
  padding: 10px;
}

.w3-xlarge {
  font-size: 25px;
}

.show {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="pdf_parent_id" class="grid_container">
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu0" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu1" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>

  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu2" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu3" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>

这是小提琴

https://jsfiddle.net/kvzbuLn9/

Answer 1

也许你可以这样做：

.w3-right {
  position: relative;
}

#dropdown_menu3 {
  bottom: 30px;
  position: absolute;
}

编辑：使用此代码：

#dropdown_menu2{
  position: absolute;
  right: 10px;
}

工作示例：

function myFunction(id) {
  document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("edit-dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }

.grid_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-gap: 10px;
    justify-content: center;
    align-content: flex-start;
    margin: 0 auto;
        margin-top: 0px;
    text-align: center;
    margin-top: 10px;
    width:508px;
    background:black;
}
.grid_block {
    background-color: #269ad3 !important;
    color: #efefef;
    border: 1px solid #ccc;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.edit-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 120px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.edit-dropdown-content a {
    color: black;
    padding: 5px 12px 5px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 14px;
}

.w3-right {
    float: right !important;
    padding:10px;
}
.w3-xlarge{
   font-size:25px;
}
 .show {display: block;}

.w3-right {
  position: relative;
}

#dropdown_menu3 {
  bottom: 30px;
  position: absolute;
}

#dropdown_menu2{
  position: absolute;
  right: 10px;
}

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<div id="pdf_parent_id" class="grid_container">

<div class="grid_block">
   <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
         <i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
         <div id="dropdown_menu0" class="edit-dropdown-content">
         <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
         <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
         <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
         <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
   </div>
</div>

<div class="grid_block">
   <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
         <i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
         <div id="dropdown_menu1" class="edit-dropdown-content">
         <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
         <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
         <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
         <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
   </div>
</div>

<div class="grid_block">
   <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
         <i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
         <div id="dropdown_menu2" class="edit-dropdown-content">
         <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
         <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
         <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
         <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
   </div>
</div>

<div class="grid_block">
   <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
         <i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
         <div id="dropdown_menu3" class="edit-dropdown-content">
         <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
         <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
         <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
         <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
   </div>
</div>

Answer 2

如果您的 html 是静态的并且不是由某些 js 代码生成的，那么您可以使用简单的方法 - 只需向您的菜单容器添加额外的类：

css：

.menu-icon-container {
  position: relative;
}
.edit-dropdown-content--inside {
  right: 23px;
  top: 0;
}

html：

<div class="w3-right menu-icon-container">
    <i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
    <div id="dropdown_menu2" class="edit-dropdown-content edit-dropdown-content--inside">
         <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
         <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
         <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
         <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a>
    </div>
</div>

Answer 3

您可以在.grid-block 上添加position: relative，这样我们就可以在我们的下拉菜单中添加left: 30px。这应该将它们全部定位在左侧。

function myFunction(id) {
  document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("edit-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.grid_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
  margin-top: 0px;
  text-align: center;
  margin-top: 10px;
  width: 508px;
  background: black;
}

.grid_block {
  background-color: #269ad3 !important;
  color: #efefef;
  border: 1px solid #ccc;
  width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: relative;
}

.edit-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  left: 30px;
  min-width: 120px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.edit-dropdown-content a {
  color: black;
  padding: 5px 12px 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 14px;
}

.w3-right {
  float: right !important;
  padding: 10px;
}

.w3-xlarge {
  font-size: 25px;
}

.show {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="pdf_parent_id" class="grid_container">
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu0" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu1" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>

  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu2" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu3" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>

我们也可以使用nth-child 选择器只定位行尾的那个。

function myFunction(id) {
  document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("edit-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.grid_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
  margin-top: 0px;
  text-align: center;
  margin-top: 10px;
  width: 508px;
  background: black;
}

.grid_block {
  background-color: #269ad3 !important;
  color: #efefef;
  border: 1px solid #ccc;
  width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: relative;
}

.edit-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  left: 120px;
  min-width: 120px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.grid_block:nth-child(3n) .edit-dropdown-content {
  left: 30px;
}

.edit-dropdown-content a {
  color: black;
  padding: 5px 12px 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 14px;
}

.w3-right {
  float: right !important;
  padding: 10px;
}

.w3-xlarge {
  font-size: 25px;
}

.show {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="pdf_parent_id" class="grid_container">
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu0" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu1" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>

  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu2" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>
  <div class="grid_block">
    <div>
      <h5>Title</h5>
      <i class="fa fa-file-pdf-o"></i>
      <h6 style="font-size:12px;">Subtitle</h6>
      <div class="w3-right">
        <i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
        <div id="dropdown_menu3" class="edit-dropdown-content">
          <a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
          <a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
          <a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
          <a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
      </div>
    </div>
  </div>