绝对定位的 div 在相对父级边缘中断

Question

我在将绝对 div 定位在相对 div 中时遇到了一些麻烦。我希望我的绝对 div（内联块）增长，直到达到给定的 px 数量（最大宽度）。这可以按预期工作，直到我将宽度（小于绝对 div 的最大宽度）添加到相对 div。

我希望绝对 div 中的文本在最大宽度 (400px) 处而不是在相对父 div (300px) 的边缘处中断。

当给出 white-space: nowrap 时，单词只会流过绝对 div 结尾。

有人知道如何解决这个问题吗？

谢谢！

参见：

http://codepen.io/anon/pen/KVJvmZ

html

<div class="relativeContainer">
  <div class="absoluteContainer">
    Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
  </div>
</div>

<div class="relativeContainer">
  <div class="absoluteContainer">
    This should stay small. 
  </div>
</div>

css

.relativeContainer {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  margin-bottom: 50px;
}

.absoluteContainer {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 400px; /* Word-break should happen here. */
  border: 1px solid red;
}

Answer 1

恐怕您的标记无法解决此问题。但隧道尽头有光明：您可以更改标记或使用 javascript 来实现您想要的。

根据您的要求，这可以帮助您：http://codepen.io/anon/pen/eJXYOJ

html

<div class="relativeContainer">
  <div class="absoluteContainer">
    <div class="contentContainer">
      Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
    </div>
  </div>
</div>

<div class="relativeContainer">
  <div class="absoluteContainer">
    <div class="contentContainer">
      This should stay small. 
    </div>
  </div>
</div>

css

.relativeContainer {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  margin-bottom: 50px;
}

.absoluteContainer {
  position: absolute;
  width: 100vw; /* do a large number of px for ie8 compatibility*/
  top: 0;
  left: 0;
  background-color: lightgray; /* just to show you what I've done*/
}

.contentContainer {
  display: inline-block;
  max-width: 400px; /* Word-break should happen here. */
  border: 1px solid red;
}

Answer 2

绝对容器与相对父容器直接相关。

没有办法让绝对容器比相对父容器更大（宽度或高度）。

如果您想要一个比其父级更大（宽度或高度）的绝对容器，则父级不应是相对的。

希望对您有所帮助。

祝你好运

Answer 3

我认为如果不使用其他类或使用 JS，您想要做的事情是不可能的。以下是使用 css 的方法：

<div class="relativeContainer">
  <div class="absoluteContainer bigger">
    Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
  </div>
</div>

<div class="relativeContainer">
  <div class="absoluteContainer">
    This should stay small. 
  </div>
</div>



.relativeContainer {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  margin-bottom: 50px;
}

.absoluteContainer {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 400px; /* Word-break should happen here. */
  border: 1px solid red;
}

.absoluteContainer.bigger{
  width: 400px;
}

Answer 4

我查看了您的示例，如果绝对值在相对值内部并且您没有指定宽度，我认为您无法做您想做的事情。目前，只有最大宽度，内部 absoluteContainer 没有理由离开相对容器，所以它不会。一旦你设置了一个宽度，你会得到你想要的，但小不能保持小！您可以通过将绝对值定位在相对值之外但在同一位置来“欺骗”您想要的东西。这为您提供了您想要的东西 - 但如果绝对值更大，它不会（说）滚动相对值。

例如：http://codepen.io/anon/pen/Nxovey

如果您不想（或不能）识别带有额外类的 CSS 中较长的文本，那么这是您可以在没有 javascript 的情况下做的最好的事情。

代码：

<div class="spoofContainer">
  <div class="absoluteContainer">
    Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
  </div>
</div>
<div class="relativeContainer">

</div>

<div class="spoofContainer">
  <div class="absoluteContainer">
    This should stay small. 
  </div>
</div>
<div class="relativeContainer">

</div>

CSS：

.spoofContainer {
  width: 400px;
  height: 0px;
  overflow: visible;
  position: relative;
}

.relativeContainer {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  margin-bottom: 50px;
}

.absoluteContainer {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 400px; /* Word-break should happen here. */
  border: 1px solid red;
}