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

Question

我在将绝对值 div 定位到相对值时遇到了一些问题。我希望我的绝对 div（内联块）增长直到达到给定的像素数量（最大宽度）。这按预期工作，直到我将宽度（小于绝对值 div 的最大宽度）添加到相对值 div.

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

给white-space:nowrap的时候，话刚好流过绝对的divs结尾。

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

谢谢！

参见：

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

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

无法使绝对容器比相对父容器更大（宽度或高度）。

如果你想要一个比他的父级更大（宽度或高度）的绝对容器，那么父级不应该是相对的。

希望对您有所帮助。

玩得开心

Answer 2

我认为如果不使用另一个 class 或不使用 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 3

我看过你的例子，如果绝对值在相对值内并且你没有指定宽度，我认为你不能做你想做的事。目前，只有最大宽度，内部 absoluteContainer 没有理由超出相对容器，所以它不会。一旦你设置了一个宽度，你就得到了你想要的，但小的不能保持小！您可以 'spoof' 通过将绝对值放在相对值之外但在同一位置来实现您想要的结果。这会给你一些你想要的东西 - 但如果绝对值更大，它不会（说）滚动相对的。

示例位于：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;
}

Answer 4

恐怕无法用您的标记解决此问题。但隧道尽头有光明：您可以更改标记或使用 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;
}

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

Absolute positioned div breaks on relative parents edge

html

css

absolute