Question

对于一个项目，我需要创建一个视图，其中下拉菜单位于父div的底部。这里有一个简短的小提琴：http://jsfiddle.net/Gruck/6owhaa63/，其中＆＃34;移动到＆＃34; item打开了更多选项，如此模型所示

  <div class="job">
    <div class="job-main">

      <div class="title">
        some content
      </div>
      <div class="counters">
        some other content

      </div>

    </div>
    <div class="ops">
      <ul>
        <li><a href="#">edit</a></li>
        <li><a href="#">visualize</a></li>
        <li><a href="#">move to</a>
          <ul class="move-to">
            <li>folder a</li>
            <li>folder b</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

还有一些css

.job {
  border-style: solid;
  border-color: #F2F2F2;
  border-width: 2px;
  background-color: #FFFFFF;
  overflow: auto;
}

.job-main {
  border-bottom: 1px solid #F2F2F2;
  overflow: hidden;
}

.title {
  width: calc(100% - 390px);
  height: 100px;
  float: left;
  min-width: 300px;
  padding:10px;

  background-color: #EE0000;
}

.counters {
  width: 362px;
  height: 80px;
  padding: 20px 0px 20px 0px;
  float: right;

  background-color: #00EE00;
}

如何让选项显示在父div之上？无论如何这样做仍然保持div内的选项？

我想我必须将选项移到父div之外并且mannualy定位它们，但我想确保我不会错过更好的方法。

感谢您提出的任何想法:) 干杯

Answer 1

我认为将它保存在父div中的唯一方法是调整它的高度，以便列表项可见。

如果你把它改成在父div之外，它似乎仍然在小提琴中正确布局：

<div class="job">
  <div class="job-main">

    <div class="title">
      some content
    </div>
    <div class="counters">
      some other content

    </div>

  </div>

</div>
<div class="ops">
  <ul>
    <li><a href="#">edit</a></li>
    <li><a href="#">visualize</a></li>
    <li><a href="#">move to</a>
      <ul class="move-to">
        <li>folder a</li>
        <li>folder b</li>
      </ul>
    </li>
  </ul>
</div>

小提琴：http://jsfiddle.net/6owhaa63/2/

父div中的下拉列表溢出：auto

1 个答案: