Question

我在相对定位的div中有一个绝对定位的div。这两个都存在于父div中，我无法更改，其明确设置为width 150px。我希望我的绝对定位div能够超出这个150px的宽度。我还需要它是动态的 - 即我不想在任何地方明确设置宽度，我想要通过设置max-width并使绝对定位div的内容填充的通常获得的行为可用空间。这可能吗？

.outerContainer {
  width:150px;/*can't be changed*/
}

.innerContainer {
  position: relative;
}

.absolutely {
  position: absolute;
}

.item {
  display:inline-block;
}

<div class="outerContainer">
    <div class="innerContainer">
        <div class="absolutely"> <!-- want this to extend beyond outerContainer width so items wrap less-->
          <div class="item">
              first item
          </div>
          <div class="item">
              second item
          </div>
          <div class="item">
              third item
          </div>
          <div class="item">
              fourth item
          </div>
        </div>
    </div>
</div>

jsfiddle版本： https://jsfiddle.net/3xbpzp7b/

Answer 1

您可以做的是为.innerContainer元素添加固定宽度，该元素在您描述时用作max-width的{{1}}种类。如果.absolutely内有更多内容，它会换行，如果更少，则会变宽。

＆＃13;

.absolutely

＆＃13;

.outerContainer {
  width:150px;/*can't be changed*/
}

.innerContainer {
  position: relative;
  width: 250px;
}

.absolutely {
  position: absolute;
  background: #fb9;
}

.item {
  display:inline-block;
}

＆＃13;

绝对定位div动态扩展超出相对父div

1 个答案: