相对于底部+容器高度的位置

Question

我使用flexbox构建了一个下拉菜单。考虑以下代码，如何使链接显示在下方，而不是它上面？

library(Gmisc)

data.1 <- data.frame(source = c("A", "A", "A", "B", "B", "C", "C"),
                     target = c("A", "B", "C", "B", "C", "C", "C"))
data.2 <- data.frame(source = c("D", "D", "E", "E", "E", "E", "F"),
                     target = c("D", "E", "D", "E", "F", "F", "F"))

transitions.1 <- getRefClass("Transition")$new(table(data.1$source, data.1$target), label = c("Before", "After"))
transitions.2 <- getRefClass("Transition")$new(table(data.2$source, data.2$target), label = c("Before", "After"))

# wish to render transition 1 and transition 2 next to each other
transitions.1$render()
transitions.2$render()

CSS：

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">
      <div class="dropdown-item">
        Link 1
      </div>
    </a>
    <a href="#">
      <div class="dropdown-item">
        Link 1
      </div>
    </a>
    <a href="#">
      <div class="dropdown-item">
        Link 1
      </div>
    </a>
  </div>
</div>

JSFiddle here

Answer 1

在.dropdown-content，您需要将bottom: 0px;替换为top: 100%;。

来自你小提琴的更新例子：

＆＃13;

＆＃13;

.dropbtn {
  background-color: #34becd;
  color: white;
  padding: 10px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  width: 200px;
}

.dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  width: 200px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: flex;
  flex-direction: column;
}

.dropdown-content a {
  font-size: 12px;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown-item {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">
      <div class="dropdown-item">
        Link 1
      </div>
    </a>
    <a href="#">
      <div class="dropdown-item">
        Link 1
      </div>
    </a>
    <a href="#">
      <div class="dropdown-item">
        Link 1
      </div>
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;