Question

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

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

当给出white-space：nowrap时，单词只会流过绝对divs。

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

谢谢！

查看：

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;
}

相对父母边缘的绝对定位div打破

4 个答案: