如何使A分部的子女与其兄弟姐妹B分部重叠?

更新后的FIDDLE

我有一个根据过滤器输入显示一些内容的表格,而我,就在最近,改变了一个自定义输入的选择标签,它可以在之前的选择可能性中搜索(很像一个datalist),并将它们显示在一个下拉列表中。

但不幸的是,我用输入制造的下拉列表并没有和表格重叠,使得表格太小(只显示2行,而为了美观应该显示的更多一些)。

下面这个简化的小玩意就代表了我的问题。

https:/jsfiddle.netozmLfk7r

在这个fiddle中,”response “div应该在整个 “table “div的上方,就像select标签中的选项一样。

  • 我试着让 “response “div的位置固定下来,但是X-scroll(在我的实际使用案例中需要)将它与输入标签错位。

在这种情况下,我应该怎么做?(欢迎使用Javascript回答,但如果可能的话,最好使用纯CSS或SASSSCSS!)

.filter {
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: #ddd;
  overflow-x: scroll;
  overflow-y: hidden;
}
.filter > .actualFilter {
  width: 150px;
}
.filter > .actualFilter > .response {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  max-height: 100px;
}
.table {
  border: 2px solid #666;
  display: flex;
  flex-direction: column;
}
<div class="filter">
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
      <span>This doesn't overlap the table :(</span>
    </div>
  </div>
  <div class="actualFilter">
    <select>
      <option>Click me</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
      <option>This Overlaps the table!</option>
    </select>
  </div>
</div>
<div class="table">
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
</div>

解决方案:

.filter {
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: #ddd;
  overflow-x: scroll;
  overflow-y: hidden;
}
.filter > .actualFilter {
  width: 150px;
}
.filter > .actualFilter > .response {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  max-height: 100px;
}
.table {
  border: 2px solid #666;
  display: flex;
  overflow-x: auto;
}

.table span {
  flex-shrink: 0;
  flex-basis: 150px;
}


    <div class="filter">
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
  <div class="actualFilter">
    <input placeholder="type filter here" />
    <div class="response">
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
      <span>Some Response</span>
    </div>
  </div>
</div>
<div class="table">
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
  <span>Some Content that doesn't matter in this case</span>
</div>

这里是一个 演示.

给TA打赏
共{{data.count}}人
人已打赏
未分类

用Prolog显示结果

2022-9-8 22:00:39

未分类

ARCore - 在平面上显示3D模型。

2022-9-8 22:00:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索